HTML5 web存儲之LocalStorage和sessionStorage

什麼是localstorage

前幾天在老項目中發現有對cookie的操做以爲很奇怪，諮詢下來是要緩存一些信息，以免在URL上面傳遞參數，但沒有考慮過cookie會帶來什麼問題：

① cookie大小限制在4k左右，不適合存業務數據
② cookie每次隨HTTP事務一塊兒發送，浪費帶寬

 localstorage能夠說是對cookie的優化，使用它能夠方便在客戶端存儲數據，而且不會隨着HTTP傳輸，但也不是沒有問題：

① localstorage大小限制在500萬字符左右，各個瀏覽器不一致
② localstorage在隱私模式下不可讀取
③ localstorage本質是在讀寫文件，數據多的話會比較卡（firefox會一次性將數據導入內存，想一想就以爲嚇人啊）
④ localstorage不能被爬蟲爬取，不要用它徹底取代URL傳參

　　

HTML5 提供了兩種在客戶端存儲數據的方法：

• localStorage - 沒有時間限制的持久的數據存儲，只要你不主動刪除能夠想存多久存多久。
• sessionStorage - 針對一個 session 的數據存儲，這些數據只有在同一個會話中的頁面才能訪問，當會話結束後數據也隨之銷燬（例如你在網頁上存儲一些數據後關閉網頁再從新打開，存儲的數據就沒有了）。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

瀏覽器支持狀況

　　瀏覽器的支持除了IE７及如下不支持外，其餘標準瀏覽器都徹底支持(ie及FF需在web服務器裏運行)，值得一提的是IE老是辦好事，例如IE七、IE6中的UserData其實就是javascript本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage。
　　要判斷瀏覽器是否支持localStorage可使用下面的代碼：

if(window.localStorage){ 
    alert("瀏覽支持localStorage")
}else{
     alert("瀏覽暫不支持localStorage")
}
//或者
if(typeof window.localStorage == 'undefined'){ 
    alert("瀏覽暫不支持localStorage")
}

 

localstorage的使用

localStorage和sessionStorage都具備相同的操做方法，例如setItem、getItem、removeItem、clear等。

setItem存儲value

用途：將value存儲到key字段
用法：.setItem( key, value)
代碼示例：sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");

getItem獲取value

用途：獲取指定key本地存儲的值
用法：.getItem(key)
代碼示例：var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

removeItem刪除key

用途：刪除指定key本地存儲的值
用法：.removeItem(key)
代碼示例：sessionStorage.removeItem("key"); localStorage.removeItem("site");

clear清除全部的key/value

用途：清除全部的key/value
用法：.clear()
代碼示例：sessionStorage.clear(); localStorage.clear();

 

 

原文：

https://www.cnblogs.com/yexiaochai/p/4509472.html

https://www.cnblogs.com/qiutianlidehanxing-blog/p/5953746.html