html5本地存储

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

[javascript] view
plaincopy





//存档  

var stopResumeMenu4 = cc.MenuItemFont.create("存档", this.onSaveMenu);  

menu4 = cc.Menu.create(stopResumeMenu4);  

menu4.setPosition(winSize.width-95,100);  

this.addChild(menu4, 1, 2);  

menu4.setVisible(true);  

onSaveMenu:function(pSender) {  

sys.localStorage.setItem("bool1",false);  

//只支持字符串类型，读取使用时需要转换  

sys.localStorage.setItem("num2","22");  

}  

首先自然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同。

存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：

[javascript] view
plaincopy





localStorage.a = 3;//设置a为"3"  

localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值  

localStorage.setItem("b","isaac");//设置b为"isaac"  

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()方法，可以在不知道有哪些键值的时候使用，如下：

[javascript] view
plaincopy





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必须要使用的原因。

另外，目前javascript使用非常多的json格式，如果希望存储在本地，可以直接调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式，如下所示：

[javascript] view
plaincopy





var details = {author:"isaac","description":"fresheggs","rating":100};  

storage.setItem("details",JSON.stringify(details));  

details = JSON.parse(storage.getItem("details"));