使用JS進行本地存取數據

本地存儲是一個window的屬性，包括localStorage和sessionStorage，從名字應該可以很清楚的辨認二者的區別，前者是一直存在本地的，除非清空本地的數據，後者只是伴隨着session，窗口一旦關閉就沒了。兩者的用法完全一樣。存儲數據的方法就是直接給window.localStorage添加一個屬性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的讀取、寫、刪除操作方法很簡單，是以鍵值對的方式存在的,例如：

localStorage.a = 1;//設置a爲"3"
localStorage["a"] = "nihao";//a的新值會覆蓋上面的值;
localStorage.setItem("b","hello");//設置b爲"hello";
var a1 = localStorage["a"];//獲取a的值
var a2 = localStorage.a;//獲取a的值
var b = localStorage.getItem("b");//獲取b的值
localStorage.removeItem("c");//清除c的值

 

           最常使用的是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本地存儲只能存字符串，任何格式存儲的時候都會被自動轉爲字符串，所以在存和讀取的時候，需要自己進行類型的轉換，目前javascript使用非常多的json格式，可以直接調用JSON.stringify()將其轉爲字符串。讀取出來後調用JSON.parse()將字符串轉爲json格式，如下所示：

 

 

//本地存取對象
var  cartInfo={classification: "飲料",name: "可口可樂", price: "3", unit: "瓶"};
localStorage.setItem("data",JSON.stringify(cartInfo)); //  往本地存 cartInfo這個對象
var cartInfo=JSON.parse(localStorage.getItem("data"));//從本地取出 cartInfo這個對象
//本地也可以存取元素爲對象的數組，和上面的方法一樣
var cartList =[
               {classification: "飲料",name: "可口可樂", price: "3", unit:“瓶”}，
               {classification: "飲料",name: "雪碧", price : "3",   unit:“瓶”}，
               {classification: "水果", name: "蘋果", price : "5.5", unit: "斤"}，
               {classification: "水果", name: "荔枝",  price: "15",   unit: "斤"}，
               {classification: "生活用品",name: "電池", price : "2", unit:“個”}，
               {classification: "食品", name: "方便麪",  price: "4.5", unit: "袋"}，
               ];
 localStorage.setItem("cartList",JSON.stringify(cartList)); //  往本地存cartList這個數組
 cartList=JSON.parse(localStorage.getItem("cartList"));  //從本地取出 cartList這個數組