js 暫時存儲 sessionStorge

時間 2019-11-06

原文原文鏈接

H5的storage有sessionstorage&localStorage，其中他們的共同特色是API相同html

下面直接上代碼，storage中的存儲與刪除:瀏覽器

<!DOCTYPE html>

H5的storage

<input type='button' onclick='setItems()' value='存值'　/>
<input type='button' onclick='getItems()' value='取值'　/>
<input type='button' onclick='deleteItem()' value='刪除'　/>

緩存

而 cookie localStorage sessionStorage 區別
一、cookie
在客戶端記錄信息肯定用戶身份。
因爲HTTP是一種無狀態的協議，服務器單從網絡鏈接上無從知道客戶身份。就給客戶端們頒發一個通行證，每人一個，不管誰訪問都必須攜帶本身通行證。這樣服務器就能從通行證上確認客戶身份了。這就是Cookie的工做原理。
客戶端發送一個http請求到服務器端
服務器端發送一個http響應到客戶端，其中包含Set-Cookie頭部
客戶端發送一個http請求到服務器端，其中包含Cookie頭部
服務器端發送一個http響應到客戶端服務器

二、localStorage
localStorage 是 HTML5 標準中新加入的技術，規則事先已經設定好了，要訪問同一個localStorage對象，頁面必須來自同一個域名，子域名無效，使用同一種協議，在同一個端口，數據會保留到經過js刪除或者用戶刪除瀏覽器緩存。cookie

三、sessionStorage
sessionStorage 與 localStorage 的接口相似，但保存數據的生命週期與 localStorage 不一樣。能夠將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉後，sessionStorage 中的數據就會被清空。網絡

四、三者對比
特性 Cookie localStorage sessionStorage
存放位置
瀏覽器端
瀏覽器端
瀏覽器端
數據的生命期可設置失效時間，默認是關閉瀏覽器後失效除非被清除，不然永久保存僅在當前會話下有效，關閉頁面或瀏覽器後被清除
存放數據大小 4K左右通常爲5MB 通常爲5MB
做用域z
同源窗口中共享
同源窗口中共享
不可在不一樣瀏覽器窗口中共享
與服務器端通訊每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題。（服務器與客戶端可互傳）僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊session

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。