window.sessionStorage屬性
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。
先談談會話存儲(sessionStorage )
查看存儲的數據個數:
sessionStorage .length
存儲一個數據:
sessionStorage .['key'] = 'value';
讀取數據:
sessionStorage.getItem('key');
也可以 var data = sessionStorage['key'];
存儲一個數據
sessionStorage.setItem('key','value');
刪除指定數據
sessionStorage.removeItem('value');
刪除所有數據
sessionStorage.clear()
在操作方面,sessionStorage和localStorage 的使用方法是一樣的;
接下來看看,我們對其進行操作會產生什么效果
以下是一個小單詞錄入系統
此時的本地存儲是空,當我點擊保存后
就會存入到本地中
本地存儲的特性就是關閉當前頁也不會消失數據,所以我拿來做存放單詞的位置
接下來看會話存儲中,我會將測試的分數以及正確和錯誤的個數存放進去,
因為會話存儲的特性就是離開當前頁就會自動刪除其中的值,所以我拿來做記錄分數
既然談到了這里,我們就來說說會話存儲,本地存儲和cookie的區別
相同點:都存儲在客戶端
不同點:
1.大小
cookie的存儲大小不超過4KB
sessionStorage和localStorage可以達到5MB或更大;
2.數據存在時間:
LocalStorage:關閉瀏覽器數據依舊會存在,除非主動刪除其中數據;
sessionStorage:當前頁關閉則數據刪除;
cookie:根據用戶設置的cookie保存時間來定,在設定時間到來之前都會一直存在;
3.數據與服務器之間的交互方式
cookie的數據會自動傳遞到服務器,服務的也可以寫到客戶端
LocalStroage和sessionStroage的數據僅保存在本地