摘要:有兩種實(shí)現(xiàn),一個是,一個是。作用域的作用域是限定在文檔源級別的,不同的文檔源之間是不能讀取和修改對方的數(shù)據(jù)的,而相同的文檔源是可以的。當(dāng)?shù)闹党隽耍祷?。除非用戶要求刪掉數(shù)據(jù),或者存儲空間不足,或者處于完全原因。
Web Storage
如有不當(dāng)之處,歡迎指出,如需轉(zhuǎn)載,請注明出處
本文一共分為兩章。
第一章講Web Storage的使用,目標(biāo)是讓大家看完第一章后基本能應(yīng)對80%的使用場景。
第二章會講一些Web Storage的進(jìn)階知識,包括一些標(biāo)準(zhǔn),沒有太多看的必要,但是也會有點(diǎn)小用。
還有,這是一篇推Web Storage的文章,所以也不給大家掛Cookie相關(guān)的鏈接或者教程,也不去多講Cookie了,就是這么任性,哼╭(╯^╰)╮!
Web Storage使用當(dāng)一個新的技術(shù)出現(xiàn)時(已經(jīng)不新了=。=),我們都會想知道:這個技術(shù)的出現(xiàn)是為了解決什么問題的?所以,Web Storage的出現(xiàn)又是為了解決什么問題咧?
顧名思義,Web Storage的出現(xiàn)就是為了解決客戶端數(shù)據(jù)存儲問題的。那有人就問了,存儲不是有Cookie, userData, Flash等等解決方案嗎?需要這個Web Storage嗎?
其實(shí)Web Storage的出現(xiàn)是為了克服Cookie的一些限制,如果你的數(shù)據(jù)不需要服務(wù)端處理,只需要存儲在客戶端,根本就不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器(Cookie會跟在每次HTTP請求里)。Web Storage的兩個主要目標(biāo)是:
提供一種在Cookie之外存儲會話數(shù)據(jù)的途徑
提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機(jī)制
所以,雖然現(xiàn)在的技術(shù)方案確實(shí)能解決很多存儲問題,但是,既然出現(xiàn)了這么個新的東西,肯定也是有它存在的意義的,我們不妨深入的了解和嘗試一下,說不定就會發(fā)現(xiàn)還是挺好用的。
兼容性目前的情況是Cookie和localStorage用的比較多,我們也可以嘗試用sessionStorage做一些Cookie現(xiàn)在做的事情。
既然要使用它,那我們首先要知道各大瀏覽器對它的支持情況,如果滿足業(yè)務(wù)需要,那我們就可以放心大膽的用了。
桌面瀏覽器瀏覽器 | IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
版本 | 8 | 3.5 | 4 | 4 | 10.5 |
從上面的圖可以看出來,桌面瀏覽器只有IE7及以下不支持Web Storage。
移動瀏覽器瀏覽器 | Andriod | UC | Safari | Opera Mini |
---|---|---|---|---|
版本 | 2.1 | 11 | 3.2 | 不支持 |
移動端瀏覽器除了Opera Mini不支持外,其他都是支持的
數(shù)據(jù)來源: caniuse.com
綜合以上的信息,Web Storage的兼容性其實(shí)是很好的,基本可以放心大膽的用它了。(如果你的項(xiàng)目需要兼容IE7及以下,可以考慮用userData代替,本文不展開介紹Web Storage以外的知識)。
分類我們已經(jīng)確定了Web Storage可用了,現(xiàn)在可以具體的講講它的使用。Web Storage有兩種實(shí)現(xiàn),一個是localStorage,一個是sessionStorage。在講它們之前我們先解釋一個概念:文檔源。
文檔源文檔源是通過協(xié)議,主機(jī)名,端口來確定的。如圖:
只要有任何一項(xiàng)不同,它們就是非同源文檔,下面的每個URL都有不同的文檔源:
http://www.example.com // 協(xié)議:http; 主機(jī)名:www.example.com https://www.example.com // 不同協(xié)議 http://static.example.com // 不同主機(jī)名 http://www.example.com:8000 // 不同端口
localStorage參考鏈接:MDN-瀏覽器的同源策略
localStorage是用來做永久性存儲的。
時效localStorage里的數(shù)據(jù)的時效是永久的!只要你不刪,它就一直在那。除非web應(yīng)用需要刪除或者用戶需要刪掉它。
作用域localStorage的作用域是限定在文檔源級別的,
不同的文檔源之間是不能讀取和修改對方的數(shù)據(jù)的,而相同的文檔源是可以的。但是不同的瀏覽器是不共享Storage的,也就是說你在Chorme瀏覽器里存的數(shù)據(jù),在Firefox里是訪問不到的,即使它們是同一文檔源。
sessionStorage是用來做臨時性存儲的。
時效sessionStorage的時效只存在于標(biāo)簽頁存在的時間,一旦標(biāo)簽被關(guān)閉了,sessionStorage存儲的數(shù)據(jù)也會被刪除掉。
作用域sessionStorage的作用域同樣是限定在文檔源級別的,不僅如此,它還被限制在標(biāo)簽頁中,不同標(biāo)簽頁的同一個頁面擁有各自的sessionStorage,數(shù)據(jù)不能共享。如果是一個頁面里有兩個元素,它們是共享sessionStorage的。
Web Storage API好,簡要的講完了Web Storage的特性之后呢,接下來該講講怎么操作Web Storage了。
Storage對象提供了操作key/value對(下面我們稱之為item)的方法,key和value都是string類型的值(包括空字符串),如果存的不是字符串,會在存儲前被轉(zhuǎn)換成字符串,要小心哦!
lengthlength返回Storage對象內(nèi)item的數(shù)量,這是一個只讀屬性。
下面的代碼可以在Chorme控制臺里給localStorage增加一個判斷是否為空的方法
localStorage.__proto__.isEmpty = function isEmpty() { return localStorage.length === 0; }key(index)
key(index)返回第n項(xiàng)的key。當(dāng)index的值超出了length,返回null。
注意:存入Storage對象內(nèi)的item的排序順序由瀏覽器廠商自己決定,不一定是按照你存入的順序排序的哦,當(dāng)你增加或者刪除item時,index對應(yīng)的值可能會變化
下面的代碼可以遍歷localStorage里的所有key
for (let i = 0, len = localStorage.length; i < len; i++) { console.log(localStorage.key(i)); }getItem(key)
返回對應(yīng)key值的value,如果沒有,返回null。
localStorage.getItem("gameRemainingTime");setItem(key, value)
setItem方法首先檢查要設(shè)置的item是否存在,如果不存在,在Storage里加入該item;如果存在,更新這個item的value。如果無法存入新item,該方法會拋出QuotaExceedeErrorDOMException異常,不改變Storage內(nèi)的任何內(nèi)容(表示Storage已經(jīng)存滿了,Storage目前推薦的存儲容量上限為5M)
localStorage.setItem("gameRemainingTime", "10");removeItem(key)
removeItem方法會刪除指定的item,如果不存在指定的item,什么都不做
localStorage.removeItem("gameRemainingTime");clear()
clear方法會清空Storage里的所有item,如果Storage本來就是空的,什么都不做
localStorage.clear();Web Storage 存儲事件
當(dāng)localStorage或者sessionStorage的數(shù)據(jù)發(fā)生變化的時候,瀏覽器都會在其他對該數(shù)據(jù)可見的窗口對象上觸發(fā)storage事件(本窗口除外)。
重要:只有當(dāng)存儲數(shù)據(jù)真正發(fā)生變化時才會觸發(fā)存儲事件,比如給一個item重新設(shè)置一個和原來一樣的value,或者是刪除一個不存在的item是不會觸發(fā)存儲事件的。
StorageEvent的幾個屬性:
key:item的key,沒有則為null
newValue: item的新值,沒有則為null
oldValue: item的舊值,沒有則為null
storageArea: sessionStorage或者localStorage
url: 觸發(fā)存儲事件的腳本所在文檔的url
window.addEventListener("storage", function(e) { console.log(e.key, e.oldValue, e.newValue, e.storageArea, e.url); }, false);Web Storage 進(jìn)階
這一章主要講一些不那么重要,零碎的小知識點(diǎn),可看可不看,有發(fā)現(xiàn)一些新東西會慢慢補(bǔ)充進(jìn)來。
sessionStorage對于存在sessionStorage里的數(shù)據(jù),瀏覽器是不應(yīng)該給它設(shè)置過期時間的,它有自己的生命周期。除非用戶要求刪掉數(shù)據(jù),或者存儲空間不足,或者處于完全原因。
現(xiàn)在有些瀏覽器有打開上次關(guān)閉的標(biāo)簽頁的功能,所以sessionStorage的生命周期可能并不是在標(biāo)簽頁關(guān)閉之后就立馬結(jié)束,可能會延時一段時間。
localStorage如果用戶禁用了緩存,那么在我們存入數(shù)據(jù)時會拋出SecurityError DOMException
磁盤空間目前推薦的磁盤空間是5M,但是不同的瀏覽器廠商有不同的設(shè)定,這個設(shè)定會由實(shí)際檢驗(yàn)合理性,比較合理的大小可以反饋給W3C,然后他們來修改這個推薦的大小。
當(dāng)存儲空間即將達(dá)到上限的時候,瀏覽器可以提醒用戶授權(quán)增加一點(diǎn)存儲空間,剩余的存儲空間瀏覽器也應(yīng)該能讓用戶知道。
IE對數(shù)據(jù)的存儲是異步的,F(xiàn)irefox和WebKit是同步的。在數(shù)據(jù)量少的時候是看不出區(qū)別的。除非存儲的數(shù)據(jù)量達(dá)到一定的量級,你會發(fā)現(xiàn)IE執(zhí)行的會比較快,因?yàn)樗^了寫到磁盤的過程。
參考文獻(xiàn)HTML Standard - Web Storage
《JavaScript 權(quán)威指南》
《JavaScript 高級程序設(shè)計》
《HTML5 權(quán)威指南》
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/91370.html
摘要:我對知乎前端相關(guān)問題的十問十答張鑫旭張鑫旭大神對知乎上經(jīng)典的個前端問題的回答。作者對如何避免常見的錯誤,難以發(fā)現(xiàn)的問題,以及性能問題和不好的實(shí)踐給出了相應(yīng)的建議。但并不是本身有問題,被標(biāo)準(zhǔn)定義的是極好的。 這一次,徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制,如果讀完本文還不懂,可以揍我。 不論你是javascript新手還是老...
摘要:下面圍繞的這樣的目的,即左右知乎網(wǎng)頁上屏幕截圖功能的實(shí)現(xiàn)前端掘金背景最近注意到知乎的屏幕截圖反饋功能,感覺非常不錯。正如你期望的,文中的闖關(guān)記之垃圾回收和內(nèi)存管理前端掘金題圖來源,授權(quán)基于協(xié)議。 微信小程序?qū)崙?zhàn)學(xué)習(xí) 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序?大場景? 微信小程序本質(zhì)上來說就是一個 HTML 5(移動網(wǎng)頁) 應(yīng)用,用view、scoll-view代替了div標(biāo)...
摘要:要使用容器上傳文件,您需要注冊一個類在中。最好不要使用內(nèi)容加載應(yīng)用程序的文件系統(tǒng)。允許用戶上傳文件的表單從后端提供的文件列表調(diào)整文件上傳限制配置文件上傳時,設(shè)置文件大小限制通常很有用。 本指南將指導(dǎo)您完成創(chuàng)建可以接收HTTP多文件上傳服務(wù)器應(yīng)用程序的過程。 你要構(gòu)建什么 您將創(chuàng)建一個接受文件上傳的Spring Boot Web應(yīng)用程序。您還將構(gòu)建一個簡單的HTML界面來上傳測試文件。 ...
摘要:什么是是里面引入的一個類似于的本地存儲功能,可以用于客戶端的本地存儲,其相對于來說有以下幾點(diǎn)優(yōu)勢存儲空間大只有的存儲空間,而在官方建議中為每個網(wǎng)站。而則是將數(shù)據(jù)存儲在本地,理論上來說數(shù)據(jù)永遠(yuǎn)不會消失,除非人為刪除。 什么是Web Storage Web Storage是HTML5里面引入的一個類似于cookie的本地存儲功能,可以用于客戶端的本地存儲,其相對于cookie來說有以下幾點(diǎn)...
閱讀 960·2021-11-23 09:51
閱讀 1205·2021-11-15 17:57
閱讀 1718·2021-09-22 15:24
閱讀 866·2021-09-07 09:59
閱讀 2298·2019-08-29 15:10
閱讀 1907·2019-08-29 12:47
閱讀 818·2019-08-29 12:30
閱讀 3456·2019-08-26 13:51