什麽是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總是辦好事，例如IE7、IE6中的UserData其實就是javascript本地存儲的解決方案。通過簡單的代碼封裝可以統一到所有的瀏覽器都支持web storage。

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

HTML5 web存儲之LocalStorage和sessionStorage