儲存資料的方法
阿新 • • 發佈:2021-01-11
瀏覽器快取:把一個已經請求過的web資源(如html頁面,圖片,JS,資料)拷貝一份放在瀏覽器中
localStorage sessionStorage cookie三者的異同
特性 | Cookie | localStorage | sessionStorage |
---|---|---|---|
資料的生命期 | 可設定失效時間,預設是關閉瀏覽器後失效 | 除非被清除,否則永久儲存 | 僅在當前會話下有效,關閉頁面或瀏覽器後被清除 |
存放資料大小 | 4K左右 | 一般為5MB | 一般為20MB |
與伺服器端通訊 | 每次都會攜帶在HTTP頭中,如果使用cookie儲存過多資料會帶來效能問題,參與和伺服器的資料通訊 | 僅在客戶端(即瀏覽器)中儲存,不參與和伺服器的通訊, | 與localStorage一樣 |
易用性 | 需自己封裝,源生的Cookie介面不友好 | 源生介面可以接受,亦可再次封裝來對Object和Array有更好的支援 | 與localStorage一樣 |
localStorage 和 sessionStorage 屬性允許在瀏覽器中儲存 鍵值對 的資料。 同源策略
-
1. 儲存(增)
window.localStorage.setItem("Authorrizition", 123);
-
2. 讀取(查)
window.localStorage.getItem("Authorrizition");
-
3. 刪
所有內容清除
window.localStorage.clear();
某個鍵刪除
window.localStorage.removeItem("Authorrizition");
-
4. JSON資料轉換
var data = { name:'張三', sex:'man' } //將 js物件 轉換為 JSON格式字串 var d=JSON.stringify(data); //儲存到本地 window.localStorage.setItem("Data", d); //獲取本地儲存的Data(JSON格式字串) var json=window.localStorage.getItem("Data"); //將JSON字串轉換成為js物件 var jsonObj=JSON.parse(json);