html5 localStorage(本機存放區)

標籤：使用者   cal   llb   format   rem   targe   htm   form   storage   

原文地址：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為pandalocalStorage.setItem(“name”,“Jane”);//覆蓋之前的值，現在name所對應的值是JanelocalStorage.getItem(“name”);//擷取name的值，即JanelocalStorage.removeItem(“name”);//刪除name以及name的值localStorage.clear();//清除localstorage裡邊所有資料function forEachKey(callback) {//遍曆顯示localStorage中的key  for (var i = 0; i < localStorage.length; i++) {    callback(localStorage.key(i));  }}

html5 localStorage(本機存放區)