JS本地存儲和會話存儲以及cookie的區別


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的數據僅保存在本地


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM