使用JS进行本地存取数据

本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，除非清空本地的数据，后者只是伴随着session，窗口一旦关闭就没了。两者的用法完全一样。存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的,例如：

Js代码  


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()方法，清除键值
c08c
对使用removeItem()。如果希望一次性清除所有的键值对，使用clear()。另外HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：

 

Js代码  


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格式，如下所示：

 

 

Js代码  


//本地存取对象  

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这个数组