localStorage主要用來替代cookie，解決cookie(可參考cookie使用要點(diǎn))讀寫困難、容量有限的問題。

localStorage有以下幾個(gè)特點(diǎn)

1.localStorage是一個(gè)普通對(duì)象，任何對(duì)象的操作都適用。

2.localStorage對(duì)象的屬性值只能是字符串。

　　這個(gè)需要特別注意了，假設(shè)我們要保存一個(gè)對(duì)象到localStorage中，可以使用拼接的方式。如

var obj = {
"na=me": "chua",
age: 9
}
//拼接到localStorage
var str = "";
for(var i in obj){
str += encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]) + ";"
}
str = str.substring(0,str.length - 1);
localStorage.testObj = str;
//解析出來
var strA = localStorage.testObj.split(";");
var newObj = {};
for(var i = 0; i < strA.length; i++){
var tmp = strA[i].split("=");
newObj[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
}

　　當(dāng)然也可以借助JSON類，將對(duì)象轉(zhuǎn)換成字符串保存，然后在取出來的時(shí)候?qū)son字符串轉(zhuǎn)換成真正可用的json對(duì)象格式

3.localStorage支持的默認(rèn)空間大小為5M,現(xiàn)代瀏覽器支持良好

　　借用xiaowei0705的HTML5 LocalStorage 本地存儲(chǔ)的切圖

　　腳本之家提醒大家需要注意的是在手機(jī)上使用的時(shí)候需要后臺(tái)開辟內(nèi)存空間支持才行。

　　"QUOTA_EXCEEDED_ERR”"是一個(gè)異常，如果你使用的存儲(chǔ)容量超過了限度（5M）就會(huì)報(bào)這個(gè)異常

4.localStorage本身帶有方法有

　　添加鍵值對(duì)：localStorage.setItem(key,value)

　　獲取鍵值：localStorage.getItem(key)

　　刪除鍵值對(duì)：localStorage.removeItem(key)。

　　清除所有鍵值對(duì)：localStorage.clear()。

　　獲取localStorage的屬性名稱（鍵名稱）：localStorage.key(index)。

還有一個(gè)和普通對(duì)象不一樣的屬性length:

　　獲取localStorage中保存的鍵值對(duì)的數(shù)量：localStorage.length。

　　下面這個(gè)例子用來獲取localStorage的鍵值對(duì)

for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
} 

　　本著相信原生方法的原則應(yīng)盡量使用原生的方法來操作localStorage。但是在iPhone/iPad上有時(shí)調(diào)用setItem()時(shí)會(huì)出現(xiàn)詭異的QUOTA_EXCEEDED_ERR錯(cuò)誤。解決方法是在setItem之前先removeItem()。所以從這個(gè)兼容問題來看，貌似使用對(duì)象添加/刪除鍵值對(duì)更方便一些，兼容也更強(qiáng)一些。

5.localStorage事件

　　 localStorage的storage事件，在存儲(chǔ)事件的處理函數(shù)中是不能取消這個(gè)存儲(chǔ)動(dòng)作的。

　　存儲(chǔ)事件只是瀏覽器在localStorage數(shù)據(jù)變化發(fā)生之后給你的一個(gè)通知。注意這里的的條件是數(shù)據(jù)真的發(fā)生了變化。也就是說，如果當(dāng)前的存儲(chǔ)區(qū)域是空的，你再去調(diào)用clear()是不會(huì)觸發(fā)事件的?；蛘吣阃ㄟ^setItem()來設(shè)置一個(gè)與現(xiàn)有值相同的值，事件也是不會(huì)觸發(fā)的。當(dāng)存儲(chǔ)區(qū)域發(fā)生改變時(shí)就會(huì)被觸發(fā)，這其中包含許多有用的屬性：

•storageArea: 表示存儲(chǔ)類型（Session或Local）
•key:發(fā)生改變項(xiàng)的key
•oldValue: key的原值
•newValue: key的新值
•url*: key改變發(fā)生的URL

　　注意: url 屬性早期的規(guī)范中為uri屬性。有些瀏覽器發(fā)布較早，沒有包含這一變更。為兼容性考慮，使用url屬性前，你應(yīng)該先檢查它是否存在，如果沒有url屬性，則應(yīng)該使用uri屬性

　　PS:在firefox和chrome中存儲(chǔ)和讀取都是正常的, 但是對(duì)storage事件的觸發(fā)似乎有點(diǎn)問題,chrome修改localStorage能觸發(fā)本頁面的storage事件，F(xiàn)irefox 自身頁面修改storage后沒有觸發(fā)window的storage事件, 但是同時(shí)訪問A.html和B.html, 在A頁面中進(jìn)行 setItem能觸發(fā)B頁面中window的storage事件, 同樣的在B頁面中進(jìn)行setItem能觸發(fā)A頁面中window的storage事件. 在IE9中, 頁面自身的設(shè)值能觸發(fā)當(dāng)前頁面的storage事件,同樣當(dāng)前頁面的設(shè)值能觸發(fā)同一”起源”下其他頁面window的storage事件,這看起來似乎更讓人想的通些.實(shí)例推薦PrimeTechBlog的初試WebStorage之localstorage

　　所以建議，為兼容瀏覽器或者自己寫兼容處理函數(shù)，或者干脆不用storage事件。

　　實(shí)例

if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};
function handle_storage(e) {
if (!e) { e = window.event; }
//響應(yīng)代碼部分 ...
} 

一些小點(diǎn)：

　　 localStorage要通過域名訪問的方式才能起作用

　如果調(diào)用clear()方法，那么key、oldValue和newValue都會(huì)被設(shè)置為null。

　　localStorage使用方式一致

•localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
•sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)

localStorage提供了幾個(gè)方法:

1、存儲(chǔ)：localStorage.setItem(key,value)

如果key存在時(shí)，更新value

2、獲?。簂ocalStorage.getItem(key)

如果key不存在返回null

3、刪除：localStorage.removeItem(key)

一旦刪除，key對(duì)應(yīng)的數(shù)據(jù)將會(huì)全部刪除

4、全部清除：localStorage.clear()

某些時(shí)候使用removeItem逐個(gè)刪除太麻煩，可以使用clear,執(zhí)行的后果是會(huì)清除所有l(wèi)ocalStorage對(duì)象保存的數(shù)據(jù)

5、遍歷localStorage存儲(chǔ)的key

.length 數(shù)據(jù)總量，例：localStorage.length
.key(index) 獲取key，例：var key=localStorage.key(index);

6、存儲(chǔ)JSON格式數(shù)據(jù)

JSON.stringify(data) 將一個(gè)對(duì)象轉(zhuǎn)換成JSON格式的數(shù)據(jù)串,返回轉(zhuǎn)換后的串
JSON.parse(data) 將數(shù)據(jù)解析成對(duì)象，返回解析后的對(duì)象

備注：localStorage存數(shù)的數(shù)據(jù)是不能跨瀏覽器共用的，一個(gè)瀏覽器只能讀取各自瀏覽器的數(shù)據(jù),儲(chǔ)存空間5M。

最新評(píng)論