詳解JavaScript中localStorage使用要點，localstorage詳解

詳解JavaScript中localStorage使用要點，localstorage詳解

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

localStorage有以下幾個特點

1.localStorage是一個普通對象，任何對象的操作都適用。

2.localStorage對象的屬性值只能是字串。

　　這個需要特別注意了，假設我們要儲存一個對象到localStorage中，可以使用拼接的方式。如

var obj = {"na=me": "chua",age: 9}//拼接到localStoragevar 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的初試WebStorage之localstorage

　　所以建議，為相容瀏覽器或者自己寫相容處理函數，或者乾脆不用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 的資料存放區

localStorage提供了幾個方法:

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

如果key存在時，更新value

2、擷取：localStorage.getItem(key)

如果key不存在返回null

3、刪除：localStorage.removeItem(key)

一旦刪除，key對應的資料將會全部刪除

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

某些時候使用removeItem逐個刪除太麻煩，可以使用clear,執行的後果是會清除所有localStorage對象儲存的資料

5、遍曆localStorage儲存的key

.length 資料總量，例：localStorage.length
.key(index) 擷取key，例：var key=localStorage.key(index);

6、儲存JSON格式資料

JSON.stringify(data) 將一個對象轉換成JSON格式的資料串,返迴轉換後的串
JSON.parse(data) 將資料解析成對象，返回解析後的對象

備忘：localStorage存數的資料是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的資料,儲存空間5M。

您可能感興趣的文章:

• 使用jquery讀取html5 localstorage的值的方法
• JS localStorage實現本機快取的方法
• Javascript 計算字串在localStorage中所佔位元組數