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/