在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

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

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

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

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

localStorage 方法

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

sessionStorage 方法

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


[javascript] 

1. //存档  
2. var stopResumeMenu4 = cc.MenuItemFont.create("存档", this.onSaveMenu);  
3. menu4 = cc.Menu.create(stopResumeMenu4);  
4. menu4.setPosition(winSize.width-95,100);  
5. this.addChild(menu4, 1, 2);  
6. menu4.setVisible(true);  
7. onSaveMenu:function(pSender) {  
8. sys.localStorage.setItem("bool1",false);  
9. //只支持字符串类型，读取使用时需要转换  
10. sys.localStorage.setItem("num2","22");  
11. }


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

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



[javascript] 

    1. localStorage.a = 3;//设置a为"3"  
2. localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值  
3. localStorage.setItem("b","isaac");//设置b为"isaac"  
4. var a1 = localStorage["a"];//获取a的值  
5. var a2 = localStorage.a;//获取a的值  
6. var b = localStorage.getItem("b");//获取b的值  
7. localStorage.removeItem("c");//清除c的值


    这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：


    [javascript]  


    1. var storage = window.localStorage;  
2. function showStorage(){  
3. for(var i=0;i<storage.length;i++){  
4. //key(i)获得相应的键，再用getItem()方法获得对应的值  
5. " : " + storage.getItem(storage.key(i)) + "<br>");  
6.  }  
7. }


    需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。

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



    [javascript]  


    1. var details = {author:"isaac","description":"fresheggs","rating":100};  
2. storage.setItem("details",JSON.stringify(details));  
3. details = JSON.parse(storage.getItem("details"));