h5的本地存儲

什么是本地存儲

以下內容從網上抄來的

HTML5 storage提供了一種方式讓網站能夠把信息存儲到你本地的計算機上，並再以后需要的時候進行獲取。這個概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候cookie都會被發送過去。HTML5的storage是存儲在你的計算機上，網站在頁面加載完畢后可以通過Javascript來獲取這些數據。
簡單的說本地存儲是HTML5的一部分。更為詳細准確的說是本地存儲過去是HTML5的標准中的一部分，而后來由於有些工作組的人表示HTML5太龐大了，於是就剝離出來作為一個單獨的標准。這聽起來好像是把一塊餡餅分成很多塊目的是為了減少總的卡路里……

為什么要用本地存儲

其實前面已經提到了，用本地存儲有這些好處

• 本地存儲和cookie一樣提供了把數據保存到本地的能力，頁面刷新或者關掉瀏覽器后，數據依然存在
• 大！雖然不同瀏覽器的標准可能不一樣，主流的一般都在5~10M，比cookie的4k強多了
• 本地存儲的數據不會被發到服務器，與cookie相比，節省帶寬，加快響應速度

所以，如果需要保存一些數據到用戶的瀏覽器，而這些數據又不需要每個請求都提交給服務器，不妨考慮使用本地存儲。

如何使用

首先，得檢查瀏覽器是否支持本地存儲
可以通過檢測window下面是否有localStorage字段來判斷，但是在IE下，本地文件是不能訪問localStorage的，此時localStorage字段為空，所以還要加上判斷

'localStorage' in window && window['localStorage']!== null

還有一種情況，假如頁面里有id為localStorage的元素，某些瀏覽器可以通過window.localStorage索引到這個元素-___,-||
為了避免你的代碼在遇到如此蛋疼的DOM時跪掉，我建議是使用特征檢查

window.localStorage && window.localStorage.getItem

確定瀏覽器支持localStorage后，我們就可以使用它的接口了，localStorage的使用方法很簡單，在chrome的控制台里面打印一下localStorage，就能列出它的全部方法，我相信很多人一看就能明白了。

我們主要用到的

length：本地存儲數據的個數
setItem(key,value)：向key字段寫入value數據
getItem(key)：去key字段的數據
removeItem(key)：移除key字段
clear()：清空該域下的所有數據
key(i)：獲取第i個數據的key

我們還可以像操作一個Object一樣操作localStorage

var ls=localStorage;
ls['user']='John';
ls.setItem('work','codding');
console.info(ls.length); //2
console.info(ls.user + ' is ' + ls.work); //John is codding
ls['work']='debugging';
console.info(ls.user + ' is ' + ls.work); //John is debugging
delete ls['work'];
for(var i in ls){
  console.info(i + ' : ' + ls.getItem(i)); //user : John
  ls.removeItem(i);
}

唯一不同的是，對於一個不存在的字段notExist，localStorage.getItem(‘notExist’)會返回null，而localStorage[‘notExist’]則返回undefined。

一些細節

看到這里，你已經掌握了使用本地存儲的方法了，下面的是我使用過程中的一些心得。
本地存儲只能存字符串數據，所有數據在寫入的時候會被隱式調用toString方法轉為字符串，即

var ls=localStorage;
var data={
  user:"John",
  sex:"female"
};
ls.setItem('data',data);
ls.setItem('realData',JSON.stringify(data));
console.info(ls.data); //[object Object]
console.info(ls.realData); //{"user":"John","sex":"female"}

因此，需要存儲json之類的數據時，需要自己做轉換。
不同瀏覽器，分配給本地存儲的空間是不一樣的，譬如chrome是5M。這5M是整個子域共享的，例如http://www.alloyteam.com/2012/04/codejam/和http://www.alloyteam.com/2012/03/css3-checkbox/兩個頁面同在www.alloyteam.com域下，它們共享同一個本地存儲空間，訪問到的數據也是同一份；而http://csslib.alloyteam.com/在csslib.alloyteam.com域下，訪問的是另一個存儲空間。
一個unicode字符占2個字節（英文和中文一樣），所以5M可以存儲1024*1024/2=524288個字符，包括key和value。也就是說，localStorage.setItem(‘user’,’John’)向本地存儲寫進了8個字符（16Byte）。這個網站有一份各種瀏覽器分配給localStorage存儲空間大小的表，你也可以在上面測試當前使用的瀏覽器支持多大的存儲空間，不過它的數據有個問題，它沒有考慮到一個unicode字符占2字節，因此它的數據應該全部乘2。
當本地存儲滿了，再往里面寫數據，將會觸發error（這點和cookie的表現不一樣），因此一個嚴謹的腳本應該捕捉寫localStorage的錯誤

var FIVE_MB=Array(5*1024*512).join('囧');
try{
  localStorage.setItem('x',FIVE_MB);
}catch(e){
  console.info('Oops');
}

當調用localStorage.clear()時，整個域的數據會被清空，包括和當前頁面共享一個存儲空間的其他頁面。

瀏覽器不支持本地存儲怎么辦

對於IE6和IE7，有userData，可以提供最多1024kb的空間，雖然userData可以設置有效期，但是仍然存在寫滿報錯的問題，並且userData創建的存儲文件不能被枚舉，因此需要人為地維護。
另外還可以使用內嵌flash控件，使用flash的本地存儲空間，flash默認提供100kb，使用更多需要用戶授權。
這兩種方法的使用成本較高，本文就不再展開討論了。

轉載自AlloyTeam：http://www.alloyteam.com/2012/04/sth-about-localstorage/