html5 localStorage(本地存儲)

原文地址：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/html5-localstorage/

html5提供兩種新的客戶端存儲數據的方法：localStorage和sessionStorage。localStorage 方法是長期保存，存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。而sessionStorage 方法是臨時保存，針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。這裏主要講解一下localstorage的用法。

localstorage官方建議5M的存儲空間，它只能存儲字符串格式的數據，因此最好在每次存儲時把數據轉換成json格式，取出的時候再轉換回來。

例如我用的是angularjs：

localStorage.setItem(「name」,angular.toJson(panda));

 

localStorage主要有如下幾種方法：

setItem(「key」,「value」)：存儲名字爲key的一個值value，若是key存在，就更新value

getItem(「key」)：獲取名稱爲key的值，若是key不存在則返回null

removeItem(「key」)：刪除名稱爲「key」的信息，這個key所對應的value也會所有被刪除

clear()：清空localStorage中全部信息

key()：鍵的索引

一個簡單的例子：

 

localStorage.setItem(「name」,「panda」);//設置name爲panda
localStorage.setItem(「name」,「Jane」);//覆蓋以前的值，如今name所對應的值是Jane
localStorage.getItem(「name」);//獲取name的值，即Jane
localStorage.removeItem(「name」);//刪除name以及name的值
localStorage.clear();//清除localstorage裏邊全部數據
function forEachKey(callback) {//遍歷顯示localStorage中的key
  for (var i = 0; i < localStorage.length; i++) {
    callback(localStorage.key(i));
  }
}