摘要:存儲(chǔ)之初探的發(fā)布和定稿為前端界帶來(lái)巨大的變化,新增的和特性給業(yè)務(wù)帶來(lái)了更多可能性,讓用戶體驗(yàn)擁有了更可能的豐富。只讀返回一個(gè)整數(shù),表示存儲(chǔ)在對(duì)象中的數(shù)據(jù)項(xiàng)數(shù)量。會(huì)在過期時(shí)間之后銷毀。安全性方面,中一般不建議存儲(chǔ)敏感信息。
Web存儲(chǔ)之LocalStorage初探
HTML5的發(fā)布和定稿為前端界帶來(lái)巨大的變化,新增的API和特性給業(yè)務(wù)帶來(lái)了更多可能性,讓用戶體驗(yàn)擁有了更可能的豐富。
· HTML Geolocation 可以定位到用戶的地理位置
· HTML Drag and Drop 拖拽API,可以實(shí)現(xiàn)更簡(jiǎn)單有效的交互方式
· HTML Local Storage 本地存儲(chǔ)方案, 配合離線緩存可以實(shí)現(xiàn)WebApp的本地化
· HTML Application Cache 離線緩存,可以將WebApp離線到本地使用
· HTML Web Workers JS版多線程,適合一些計(jì)算密集型的業(yè)務(wù)
· HTML SSE Server-sent Event 服務(wù)器推送技術(shù),可以把主動(dòng)權(quán)交給服務(wù)器端,往客戶端主動(dòng)推送數(shù)據(jù)、消息
· HTML Canvas/WebGL HTML圖像處理API,能夠?qū)崿F(xiàn)更絢爛和豐富的效果
· HTML Audio/Video HTML音視頻API,能夠更方便處理音視頻
今天,我就來(lái)簡(jiǎn)單介紹一下LocalStorage 這個(gè)本地存儲(chǔ)。
首先來(lái)看一下 關(guān)于 Storage 的API。
Storage.length 只讀
返回一個(gè)整數(shù),表示存儲(chǔ)在 Storage 對(duì)象中的數(shù)據(jù)項(xiàng)數(shù)量。
Storage.key()
該方法接受一個(gè)數(shù)值 n 作為參數(shù),并返回存儲(chǔ)中的第 n 個(gè)鍵名。
Storage.getItem()
該方法接受一個(gè)鍵名作為參數(shù),返回鍵名對(duì)應(yīng)的值。
Storage.setItem()
該方法接受一個(gè)鍵名和值作為參數(shù),將會(huì)把鍵值對(duì)添加到存儲(chǔ)中,如果鍵名存在,則更新其對(duì)應(yīng)的值。
Storage.removeItem()
該方法接受一個(gè)鍵名作為參數(shù),并把該鍵名從存儲(chǔ)中刪除。
Storage.clear()
調(diào)用該方法會(huì)清空存儲(chǔ)中的所有鍵名。
LocalStorage 和 SessionStorage 共同實(shí)現(xiàn)了這些API,可以看到API非常簡(jiǎn)單,只有5個(gè)API函數(shù)和一個(gè)只讀的length屬性,我們先看一下LocalStorage 的 DEMO,里面示范了除了key() 函數(shù)之外的API。
rLVvMN
可以看到,storage 的API用例還是很簡(jiǎn)單的。
還有一個(gè)storage 的 Event事件,在LocalStorage 和 sessionStorage 變更的時(shí)候會(huì)觸發(fā)一個(gè)Storage 的事件,但是只能在同源策略下觸發(fā),并且在當(dāng)前窗口是不能觸發(fā)的。也就是說(shuō)在同一個(gè)瀏覽器中,A標(biāo)簽頁(yè)變更Storage,B標(biāo)簽頁(yè)會(huì)觸發(fā)這個(gè)事件,在A里面是不行的,同時(shí)不在同一個(gè)瀏覽器里面也是無(wú)法觸發(fā)的。
Storage事件的屬性如下:
target Read only EventTarget The event target (the topmost target in the DOM tree). type Read only DOMString The type of event. bubbles Read only boolean Does the event normally bubble? cancelable Read only boolean Is it possible to cancel the event? key Read only DOMString (string) The key being changed. oldValue Read only DOMString (string) The old value of the key being changed. newValue Read only DOMString (string) The new value of the key being changed. url Read only DOMString (string) The address of the document whose key changed. storageArea Read only Storage The Storage object that was affected.
無(wú)論是LocalStorage 、sessionStorage 還是cookie 都有各自的優(yōu)劣,下表我們來(lái)列舉一下他們的對(duì)比情況。
特性 | Cookie | localStorage | sessionStorage |
---|---|---|---|
數(shù)據(jù)的生命期 | 一般由服務(wù)器生成,可設(shè)置失效時(shí)間。如果在瀏覽器端生成Cookie,默認(rèn)是關(guān)閉瀏覽器后失效 | 除非被清除,否則永久保存 | 僅在當(dāng)前會(huì)話下有效,關(guān)閉頁(yè)面或?yàn)g覽器后被清除 |
存放數(shù)據(jù)大小 | 4K左右 | 一般為5MB | |
與服務(wù)器端通信 | 每次都會(huì)攜帶在HTTP頭中,如果使用cookie保存過多數(shù)據(jù)會(huì)帶來(lái)性能問題 | 僅在客戶端(即瀏覽器)中保存,不參與和服務(wù)器的通信 | |
易用性 | 需要程序員自己封裝,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封裝來(lái)對(duì)Object和Array有更好的支持 |
當(dāng)然還有以下情況:
cookie由服務(wù)端生成,用于標(biāo)識(shí)用戶身份;而兩個(gè)storage用于瀏覽器端緩存數(shù)據(jù)
三者都是鍵值對(duì)的集
cookie的話,會(huì)隨http請(qǐng)求一起發(fā)送到服務(wù)器;而兩個(gè)storage可以由腳本選擇性的提交
會(huì)話的storage會(huì)在會(huì)話結(jié)束后銷毀;而localStorage會(huì)一直存在直到手動(dòng)銷毀。cookie會(huì)在過期時(shí)間之后銷毀。
安全性方面,cookie中一般不建議存儲(chǔ)敏感信息。兩個(gè)storage的數(shù)據(jù)提交后在服務(wù)端一定要校驗(yàn)(其實(shí)任何payload和qs里的參數(shù)都要校驗(yàn))。
目前,對(duì)于LocalStorage的介紹大概就到此為止了,可能有某些錯(cuò)誤的地方,也可能有些不準(zhǔn)確的地方,歡迎各位指出斧正。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/86312.html
背景 隨著前端技術(shù)日新月異地快速發(fā)展,web應(yīng)用功能和體驗(yàn)也逐漸發(fā)展到可以和原生應(yīng)用媲美的程度,前端緩存技術(shù)的應(yīng)用對(duì)這起到了不可磨滅的貢獻(xiàn),因此想一探前端的緩存技術(shù),這篇文章主要會(huì)介紹在日常開發(fā)中比較少接觸的IndexedDB IndexedDB 什么是IndexedDB IndexedDB簡(jiǎn)單理解就是前端數(shù)據(jù)庫(kù),提供了一種在用戶瀏覽器中持久存儲(chǔ)數(shù)據(jù)的方法,但是和前端關(guān)系型數(shù)據(jù)不同的是,Index...
摘要:學(xué)完的基礎(chǔ)語(yǔ)法之后,練手一下,從最基本的留言板開刀吧。功能不多,主要為了熟悉的基礎(chǔ)語(yǔ)法使用。 學(xué)完vue的基礎(chǔ)語(yǔ)法之后,練手一下,從最基本的留言板開刀吧。功能不多,主要為了熟悉vue的基礎(chǔ)語(yǔ)法使用。詳細(xì)vue教程請(qǐng)移步vue.js 2.0 技術(shù)框架 1.vue.js 2.0 2.bootstrap 語(yǔ)法概述 這里只寫一點(diǎn)此例子用到的一些語(yǔ)法知識(shí),詳細(xì)API請(qǐng)移步:vue 2.0 a...
摘要:持久型相當(dāng)于存儲(chǔ)型跨站腳本。這玩意兒涉及到一點(diǎn)和瀏覽器引擎解析的問題。說(shuō)正事,是支持碼形式的。的調(diào)用有幾個(gè)概念我們先來(lái)了解一下。本來(lái)說(shuō)的只用天完成的,沒想到各種事兒拖了兩天,。 前些時(shí)間準(zhǔn)備面試的時(shí)候一直會(huì)遇到這個(gè)XSS,寥寥幾句話好像很簡(jiǎn)單,后來(lái)看到同學(xué)的《XSS跨站腳本攻擊剖析與防御》這本書,稍微翻看了一下,其中的學(xué)問還是挺多的。這系列的文章就當(dāng)做讀書筆記吧。 什么是XSS 聽過很...
閱讀 2384·2021-11-23 09:51
閱讀 5854·2021-09-22 15:39
閱讀 3409·2021-09-02 15:15
閱讀 3559·2019-08-30 15:54
閱讀 2418·2019-08-30 15:53
閱讀 1459·2019-08-30 14:04
閱讀 2515·2019-08-29 18:33
閱讀 2481·2019-08-29 13:08