html5 web storage

2022-01-19 10:39:56 字數 1290 閱讀 7816

參考資料:

client storage

有效範圍

過期時間

值型別相容性

服務端訪問性

大小cookie

同源共享

預設是會話時長, 可設定

string

all自動回傳,伺服器可操作

4k 左右

sessionstorage

同一個標籤頁(注意,和session的同瀏覽器共享不同)

標籤頁或瀏覽器關閉

string

ie8+

不可訪問

5m 左右,瀏覽器差距較大

localstorage

同源的每個視窗和標籤頁

永久string

ie8+

不可訪問

5m 左右,瀏覽器差距較大

使用的時候根據各項特點結合使用場景來選擇合適的儲存介質

例子:

同時開啟預訂機票的2個標籤頁a和b, 選擇不同的出發日期作對比 a: 2016-10-1;b:2016-10-3,如果用cookie來儲存選中日期; 由於cookie的可訪問範圍比sessionstorage大 ,那麼在標籤頁a提交訂單的時候,訂單的出發日期就很可能是b標籤頁選中的 2016-10-3日 而不是2016-10-1日。 這種情形sessionstorage更合適

// 在其他標籤頁操作web storage才能觸發

window.addeventlistener("storage", displaystorageevent, true);

function displaystorageevent(e)

}

storage事件相關屬性

keyvalue

key被更新或操作的鍵

oldvalue

更新前的值,如果是新增則為null

newvalue

更新後的值,如果是刪除則為null

urlstorage事件見發生的源

storagearea

localstorage或者sessionstorage

無論何時,storage 物件發生變化時(即建立/更新/刪除資料項時,重複設定相同的鍵值不會觸發該事件,storage.clear() 方法至多觸發一次該事件),storageevent 事件會觸發。在同一個頁面內發生的改變不會起作用——在相同域名下的其他頁面(如一個新標籤或 iframe)發生的改變才會起作用。在其他域名下的頁面不能訪問相同的 storage 物件。

HTML5 Websocket

基於tcp 客戶端與伺服器全雙工通訊 實現長連結 永續性連結 websocket是一種在單個tcp連線上進行全雙工通訊的協議,他能夠允許服務...

Web Storage

web儲存最初作為html5的一部分被定義成api形式,但是後來被剝離出來作為獨立的一份標準了。web儲存標準所描述的api包含locals...

html5 localStorage儲存

例項 重新整理值會增長,關掉瀏覽器,再開啟,值會在原基礎上增長 if localstorage pagecount else documen...