cookie、LocalStorage、sessionStorage三者區別以及使用方式

cookie用來保存客戶瀏覽器請求服務器頁面的請求信息

HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）

WebStorage的目的是克服由cookie所帶來的一些限制，當數據需要被嚴格控制在客戶端時，不需要持續的將數據發回服務器

三者的共同點都是保存在瀏覽器端，且同源

下面是他們之間的區別

生命周期

cookie：可以通過expires設置失效時間，不設置默認關閉瀏覽器即失效

localStorage：除非手動清除，否則永久保存

sessionStorage：僅在當前會話時候生效，關閉頁面即失效

存儲大小

cookie:4KB左右

localStorage、sessionStorage:可以保存5M的信息

HTTP請求

cookie:每次都會攜帶在http頭中，過多使用cookie會帶來性能問題

localStorage、sessionStorage:僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信

易用性

cookie:需要程序員自己封裝，源生的Cookie接口不友好

localStorage、sessionStorage：源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持

應用場景

cookie：適合識別用戶登錄

localStorage和sessionStorage唯一的差別一個是永久保存在瀏覽器里面，一個是關閉網頁就清除了信息

localStorage：可以用來跨頁面傳遞參數

sessionStorage：用來保存臨時數據，防止用戶刷新頁面之后丟失參數

 

---

 

使用方式

cookie使用方式 移步 https://www.cnblogs.com/theblogs/p/10617515.html

localStorage和sessionStorage所使用的方法是一樣的

設置本地存儲

localStorage.setItem('user','小明');

獲取本地存儲

localStorage.getItem('user');

刪除本地存儲

localStorage.removeItem('user');

清除本地存儲

localStorage.clear();

 

以sessionStorage為栗子

var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//存儲數據
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//獲取全部數據
console.log(dataAll,'獲取全部數據');
var dataSession=sessionStorage.getItem(name);//獲取指定鍵名數據
var dataSession2=sessionStorage.sessionData;//sessionStorage是js對象，也可以使用key的方式來獲取值
console.log(dataSession,dataSession2,'獲取指定鍵名數據');
sessionStorage.removeItem(name); //刪除指定鍵名數據
console.log(dataAll,'獲取全部數據1');
sessionStorage.clear();//清空緩存數據：localStorage.clear();
console.log(dataAll,'獲取全部數據2'); 

 

參考：https://juejin.im/post/5a191c47f265da43111fe859