HTML5 提供了兩種在客戶端存儲數據的新方法:
localStorage 沒有時間限制的數據存儲。sessionStorage 針對一個 session 的數據存儲。關閉該頁面后數據自動消失。注意:只有關閉才會刪除該對象的數據,使用F5刷新該頁面數據不會被刪掉。window.localStorage 前面的window前綴可以省略 sessionStorage 前面的window前綴可以省略
與Cookie的區別
之前,這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲(cookie最多只能存4K),因為它們由每個對服務器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,數據不是由每個服務器請求傳遞的,而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能K(storage的存儲量目前業界基本統一為5M,各個瀏覽器也不太一樣)。
對于不同的網站,數據存儲于不同的區域,并且一個網站只能訪問其自身的數據。并且storage是無法跨域的,也無法讓子域名繼承父域名的storage數據
查看對象的屬性和方法
使用console.log()方法可以打印出一個對象的屬性和方法
console.log("localStorage");console.log(localStorage);console.log("sessionStorage");console.log(sessionStorage);
可以看出,localStorage 和 sessionStorage 實際上都是由許多對“key-value”組成的字典,暴露的接口方法均相同。 注意:存入的值無論什么類型,均會被當成字符串進行存儲。
setItem( key, value ) 將value存儲到key字段getItem( key ) 獲取指定key本地存儲的值removeItem( key ) 刪除指定key本地存儲的值clear() 清除所有的key/valuekey( index ) 通過索引來訪問keylength 獲取當前鍵值對(KV)的個數點和[] web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通對象一樣用點(.)操作符,及[]的方式進行數據存儲事件
網上有說可以通過 window.addEventListener(“storage”, function() {}) 來監聽storage值得改變,無論是分頁還是通過iframe嵌入,親測是都是無反應的,即無法監聽。
Chrome瀏覽器查看storage的方式
右鍵 -> 檢查(Ctrl + Shift + I) -> 切換到application選項卡 -> Storage

示例代碼
示例一:使用setItem、getItem、點和[]的方式來存取變量
<html> <body> <script> if(!localStorage.visitCount) { localStorage.setItem("visitCount", 1); } else { //localStorage["visitCount"] = localStorage.getItem("visitCount") + 1; //localStorage.visitCount = localStorage["visitCount"] + 1; localStorage.setItem("visitCount", localStorage.visitCount + 1); } if(!sessionStorage.visitCount) { sessionStorage.setItem("visitCount", 1); } else { //sessionStorage["visitCount"] = sessionStorage.getItem("visitCount") + 1; //sessionStorage.visitCount = sessionStorage["visitCount"] + 1; sessionStorage.setItem("visitCount", sessionStorage.visitCount + 1); } document.write("localStorage.visitCount = " + localStorage.visitCount + "<br>"); document.write("sessionStorage.visitCount = " + sessionStorage.visitCount + "<br>"); </script> </body></html>示例二:通過length和key來遍歷storage
<html> <body> <script> for(var i=0; i<localStorage.length; i++) { document.write("localStorage.key("+i+") = " + localStorage.key(i) + "<br>"); } </script> </body></html>