提到本地存儲(chǔ)localStorage就不得不提sessionStorage和cookie這兩個(gè)。其中l(wèi)ocalStorage和sessionStorage可以合成稱為web Storage。

這里比較一下cookie和web Storage：

cookie：容量4kb，各種瀏覽器都支持，但每次請(qǐng)求都會(huì)把本地存的cookies發(fā)送到服務(wù)器。

web Storage：存儲(chǔ)空間更大，數(shù)據(jù)僅存在本地，不與服務(wù)器發(fā)生交互，獨(dú)立的存儲(chǔ)空間。

而localStorage和sessionStorage的區(qū)別：

localStorage：同源（相同個(gè)域名、協(xié)議和端口）的數(shù)據(jù)會(huì)長(zhǎng)時(shí)間保存下來(lái)，即使瀏覽器關(guān)掉了也不受影響。

sessionStorage：數(shù)據(jù)存儲(chǔ)在窗口對(duì)象中，對(duì)于瀏覽器其他窗口或者新標(biāo)簽不可見(jiàn)。窗口關(guān)閉，數(shù)據(jù)丟失。

localStorage的使用：

1.設(shè)置鍵值對(duì)：localStorage.setItem('name','value'); 還有對(duì)象簡(jiǎn)易的寫(xiě)法：localStorage.name = value或者localStorage['name'] = value;

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

3.刪除指定鍵值對(duì)：localStorage.removeItem('name');簡(jiǎn)易的寫(xiě)法：delete localStorage['name'];

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

5.獲取所有鍵值對(duì)的總數(shù)長(zhǎng)度：localStorage.length;

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

7.storage事件，當(dāng)localStorage的鍵值對(duì)發(fā)生變化的時(shí)候，就會(huì)觸發(fā)storage事件

if (window.addEventListener) {

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

} else {

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

};

事件觸發(fā)之后會(huì)傳一個(gè)對(duì)象作為參數(shù)給處理函數(shù)，其中主要用到的對(duì)象屬性有：

{

url:'當(dāng)前window的url',

key:'鍵',

newValue:'新值',

oldValue:'舊值',

timeStamp:'時(shí)間戳',

type:'storage'

}

PS:storage事件，在當(dāng)前窗口或者標(biāo)簽下是不會(huì)觸發(fā)的，確實(shí)如此，由此可見(jiàn)，storage事件是用于localStorage中的數(shù)據(jù)改變的時(shí)候，用來(lái)通知同源下的其他窗口和標(biāo)簽的。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。