ActionScript
TypeScript
JavaScript

Web Storage数据存储

发布时间:2017-01-12

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


localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

存储在 sessionStorage 里面的数据会在浏览器会话(browsing session)结束时被清除,即浏览器关闭时。

之前,这些都是由 cookie 完成的。但是 Cookie大小限制在4k,不适合大量数据的存储,而且它们由每个对服务器的请求来传递,这使得 Cookie速度很慢而且效率也不高。Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

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

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。因此本地数据的存储我们完全可以用LocalStorage。LayaAir引擎LocalStorage进行了简单的封装.对应的类是LocalStorage。下面通过简单的例子来看下他的使用。

blob.png

编译之后,我们通过IDE的二维码链接打开网址,如图

blob.png

点击二维码 用谷歌浏览器打开,然后F12出现如图:

blob.png

从图中可以看到刚才我们的数据都存储进去了

下面我们对这些数据进行清除。

blob.png

通过上图,我们看到,可以通过添加代码 LocalStorage.removeItem("data");将键值为data的数据进行清空,编译然后刷新页面,发现data数据没有了。

blob.png

如果我们需要对数据全部清理,代码如下:

blob.png

如上图代码示例,我们添加LocalStorage.clear();这句代码,然后编译刷新页面,发现刚才域名下的存储的所有数据都消失。

sessionStorage在LayaAir引擎中暂时没有封装,但完全可以直接使用。下面展示下载LayaAir重怎么用sessionStorage。下面这个例子就是一个页面计数器,对用户在当前 session 中访问页面的次数进行计数:

打开LayaAirIDE 新建个空项目。具体代码如下:

blob.png

    var sessionStorage:* = Browser.window.sessionStorage;这句话意思是获取当前页面中的sessionStorage会话对象。


这里的逻辑就是判断当前会话对象是否存在pagecount属性,不存在就是第一次打开设置为1,存在的话就是已经打开,进行累加。并且输出累加次数。编译这个文件,然后用谷歌运行,F12打开控制台发现输出的是1,然后我们不断的刷新页面发现输出的次数在不断累加。然后我们关闭谷歌浏览器,重新打开这个页面发现此时输出的又是1,不断刷新页面次数又在累加。由此我们可以看出sessionStorage是会话级别的存储对象。关闭浏览器就会消失。