localStorage使用要點
localStorage主要用來替代cookie，解決cookie( 可參考cookie使用要點 )讀寫困難、容量有限的問題。localStorage有以下幾個特點
1.localStorage是一個普通對象，任何對象的操作都適用。
2.localStorage對象的屬性值只能是字符串。
這個需要特別注意了，假設我們要保存一個對象到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]);
} 當然也可以借助JSON類，將對象轉換成字符串保存，然后在取出來的時候將json字符串轉換成真正可用的json對象格式
3.localStorage支持的默認空間大小為5M,現代瀏覽器支持良好
借用xiaowei0705的 HTML5 LocalStorage 本地存儲 的切圖
需要注意的是在 手機上使用的時候需要后臺開辟內存空間支持才行 。
"QUOTA_EXCEEDED_ERR”"是一個異常，如果你使用的存儲容量超過了限度（5M）就會報這個異常
4.localStorage本身帶有方法有
添加 鍵值對：localStorage.setItem(key,value)
獲取鍵值：localStorage.getItem(key)
刪除 鍵值對： localStorage.removeItem(key)。
清除所有鍵值對：localStorage.clear()。
獲取localStorage的屬性名稱（鍵名稱）：localStorage.key(index)。
還有一個和普通對象不一樣的屬性length:
獲取localStorage中保存的鍵值對的數量：localStorage.length。
下面這個例子用來獲取localStorage的鍵值對
for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
} 本著相信原生方法的原則應盡量使用原生的方法來操作localStorage。但是 在 iPhone/iPad 上有時調用 setItem() 時會出現詭異的 QUOTA_EXCEEDED_ERR 錯誤。解決方法是在 setItem 之前先 removeItem() 。所以從這個兼容問題來看，貌似使用對象添加/刪除鍵值對更方便一些，兼容也更強一些。
5.localStorage事件
localStorage的storage事件，在存儲事件的處理函數中是 不能取消 這個存儲動作的。
存儲事件只是瀏覽器在 localStorage數據變化發生之后 給你的一個通知。注意這里的的條件是數據 真的發生了 變化。也就是說，如果當前的存儲區域是空的，你再去調用clear()是不會觸發事件的。或者你通過setItem()來設置一個與現有值相同的值，事件也是不會觸發的。當存儲區域發生改變時就會被觸發，這其中包含許多有用的屬性：
- storageArea : 表示存儲類型（Session或Local）
- key :發生改變項的key
- oldValue : key的原值
- newValue : key的新值
- url* : key改變發生的URL
注意: url 屬性早期的規范中為uri屬性。有些瀏覽器發布較早，沒有包含這一變更。為兼容性考慮，使用url屬性前，你應該先檢查它是否存在，如果沒有url屬性，則應該使用uri屬性
PS:在firefox和chrome中存儲和讀取都是正常的, 但是對storage事件的觸發似乎有點問題,chrome修改localStorage能觸發本頁面的storage事件，Firefox 自身頁面修改storage后沒有觸發window的storage事件, 但是同時訪問A.html和B.html, 在A頁面中進行 setItem能觸發B頁面中window的storage事件, 同樣的在B頁面中進行setItem能觸發A頁面中window的storage事件. 在IE9中, 頁面自身的設值能觸發當前頁面的storage事件,同樣當前頁面的設值能觸發同一”起源”下其他頁面window的storage事件,這看起來似乎更讓人想的通些.實例推薦 PrimeTechBlog的
所以建議， 為兼容瀏覽器或者自己寫兼容處理函數，或者干脆不用storage事件 。
實例
if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};
function handle_storage(e) {
if (!e) { e = window.event; }
//響應代碼部分
...
} 一些小點：
localStorage要通過域名訪問的方式才能起作用
如果調用clear()方法，那么key、oldValue和newValue都會被設置為null。
localStorage使用方式一致
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個 session 的數據存儲
如果覺得本文不錯，請點擊右下方【推薦】！