提到本地存儲localStorage就不得不提sessionStorage和cookie這兩個。其中localStorage和sessionStorage可以合成稱為web Storage。

這里比較一下cookie和web Storage：

cookie：容量4kb，各種瀏覽器都支持，但每次請求都會把本地存的cookies發送到服務器。

web Storage：存儲空間更大，數據僅存在本地，不與服務器發生交互，獨立的存儲空間。

而localStorage和sessionStorage的區別：

localStorage：同源（相同個域名、協議和端口）的數據會長時間保存下來，即使瀏覽器關掉了也不受影響。

sessionStorage：數據存儲在窗口對象中，對于瀏覽器其他窗口或者新標簽不可見。窗口關閉，數據丟失。

localStorage的使用：

1.設置鍵值對：localStorage.setItem('name','value'); 還有對象簡易的寫法：localStorage.name = value或者localStorage['name'] = value;

2.獲取指定鍵值對：localStorage.getItem('name');

3.刪除指定鍵值對：localStorage.removeItem('name');簡易的寫法：delete localStorage['name'];

4.刪除同源下的所有鍵值對：localStorage.clear();

5.獲取所有鍵值對的總數長度：localStorage.length;

6.獲取鍵值對的key：localStorage.key(indexNum);

7.storage事件，當localStorage的鍵值對發生變化的時候，就會觸發storage事件

if (window.addEventListener) {

window.addEventListener("storage", handlerStorage, false);

} else {

window.attachEvent("onstorage", handlerStorage); //IE瀏覽器

};

事件觸發之后會傳一個對象作為參數給處理函數，其中主要用到的對象屬性有：

{

url:'當前window的url',

key:'鍵',

newValue:'新值',

oldValue:'舊值',

timeStamp:'時間戳',

type:'storage'

}

PS:storage事件，在當前窗口或者標簽下是不會觸發的，確實如此，由此可見，storage事件是用于localStorage中的數據改變的時候，用來通知同源下的其他窗口和標簽的。

總結

以上是生活随笔為你收集整理的HTML5 API详解（9）:大家都知道的 localStorage 本地存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。