HTML5 LocalStorage 本機存放區原理詳解

標籤：區別   rem   一段   讀取   簡單   i++   ssi   詳解   doc   

　　首先自然是檢測瀏覽器是否支援本機存放區。在HTML5中，本機存放區是一個window的屬性，包括localStorage和sessionStorage，從名字應該可以很清楚的辨認二者的區別，前者是一直存在本地的，後者只是伴隨著session，視窗一旦關閉就沒了。二者用法完全相同，這裡以localStorage為例。

　　if(window.localstorage){

　　alert(‘this brower supports localstorage‘);

}else{

　　alert(‘this brower not supports localstorage)

}

　　儲存資料的方法就是直接給window.localStorage添加一個屬性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的讀取、寫、刪除操作方法很簡單，是以索引值對的方式存在的，如下：

　　localStorage.setItem("a","isaac");//設定a的值為"isaac"

　　var a = localStorage.getItem("a");//擷取a的值

　　localStorage.removeItem("a");//清除a的值

　　最推薦使用的自然是getItem()和setItem()，清除索引值對使用removeItem()。如果希望一次性清除所有的索引值對，可以使用clear()。另外，HTML5還提供了一個key()方法，可以在不知道有哪些索引值的時候使用，如下：

　　var  storage = window.localStorage;

　　function showStorage(){

　　for(var i = 0;i<storage.length;i++){

　　//key(i)獲得相應的鍵，再用getItem獲得相應的索引值　　　　

　　document.write(storage.key(i)+":"+storage.getItem(storage.key(i))+"<br>")

　　}

}

　　需要注意的是，HTML5本機存放區只能存字串，任何格式儲存的時候都會被自動轉為字串，所以讀取的時候，需要自己進行類型的轉換。這也就是上一段代碼中parseInt必須要使用的原因。

　　另外，在iPhone/iPad上有時設定setItem()時會出現詭異的QUOTA_EXCEEDED_ERR錯誤，這時一般在setItem之前，先removeItem()就ok了。

HTML5 LocalStorage 本機存放區原理詳解