Web前端效能優化 瀏覽器本地儲存

2021-10-24 15:34:17 字數 1351 閱讀 9552

cookie, sessionstorage, localstorage這三者都可以被用來在瀏覽器端儲存資料,而且都是字串型別的鍵值對!

session:會話

sessionstorage:瀏覽器端用於儲存資料的容器,常常被前端人員簡稱為session

session會話儲存:伺服器端一種儲存資料的方式,常常被後端人員簡稱為session

1.***xxstorage.setitem('key', 'value');

該方法接受乙個鍵名和值作為引數,將會把鍵值對新增到儲存中,如果鍵名存在,則更新其對應的值。

2.var data = ***xxstorage.getitem('person');

該方法接受乙個鍵名作為引數,返回鍵名對應的值。

3.***xxstorage.removeitem('key');

該方法接受乙個鍵名作為引數,並把該鍵名從儲存中刪除。

4.***xxstorage.clear();

呼叫該方法會清空儲存中的所有鍵名

備註

sessionstorage儲存的內容會隨著瀏覽器視窗關閉而消失

localstorage儲存的內容,需要手動清除才會消失

storage事件:

1. storage物件發生變化時觸發(即建立/更新/刪除資料項時,storage.clear() 只會觸發一次)

2. 在同乙個頁面內發生的改變不會起作用

3. 在相同網域名稱下的其他頁面發生的改變才會起作用。(修改的頁面不會觸發事件,與它共享的頁面會觸發事件)

key: 修改或刪除的key值,如果呼叫clear(),為null

newvalue: 新設定的值,如果呼叫clear(),為null

oldvalue: 呼叫改變前的value值,如果呼叫clear(),為null

url: 觸發該指令碼變化的文件的url

storagearea: 當前的storage物件

使用方法:

window.addeventlistener('storage',function (event) )

測試 瀏覽器儲存量的支援

瀏覽器本地儲存

本地儲存 儲存讀取 刪除在瀏覽器端儲存資料 全域性變數 cookie sessionstorage localstorage 只能短時間儲存資料,頁面跳轉或重新整理後資料會消失 按儲存時間長短分成2種 會話cookie 視窗關閉即消失 持久化cookie 可以由程式設計師指定存活時間,關閉視窗也不會...

瀏覽器本地儲存

瀏覽器的本地儲存主要分為cookie webstorage indexdb,其中webstorage又可以分為localstorage和sessionstorage cookie cookie最開始被設計出來並不是為了做本地儲存。而是彌補http在狀態管理上的不足 http協議是乙個無狀態協議,客戶...

關於瀏覽器本地儲存

通過瀏覽器對資料進行本地儲存 2 設定cookie document.cookie name value 存字串 3 獲取cookie document.cookie 得到所有的儲存資訊,以 隔開,通過字元拆分成陣列split 4 修改已經儲存的資料 重新覆蓋 document.cookie nam...