拥抱 HTML5:storage 简介以及使用方法

来源:互联网 时间:1970-01-01

前言

storage 其实是个很简单的东西,基本上只要知道 javascript 中对象的概念,然后读完此文,storage 的用法也就了然于胸了。

简单来说,你可以把 storage 想象成是储存在客户端(浏览器)中的一些 javascript 对象,那么有什么用呢?举个简单的例子,百度搜索会把你每次的搜索关键字用 storage(localStorage) 存储下来,那么下次你再搜索相同的内容的时候,它会优先将你曾经搜过的内容进行下拉展示。

关于 storage 的内容,可以用 chrome 下的 Resources 面板进行查看。

方法:

clear() 删除所有值。ff 没有实现 getItem(name) 根据指定的名字 name 获取对应的值 key(index) 获得 index 位置处的值的名字 removeItem(name) 删除由 name 指定的名值对 setItem(name, value) 为指定的 name 设置一个对应的值

也可以用点语法和方括号语法来访问设置,但是建议用上面的方法。

还有一点要注意的是 value 必须是字符串 。

sessionStorage

顾名思义,sessionStorage 对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭,或者更准确地说是保持到该页面标签关闭为止。对于同一个页面,在不同标签中打开,是拥有不同的 sessionStorage 对象的,而如果相同页面,刷新后,sessionStorage 对象也会重新开始。

// 设置 sessionStorage.setItem('name', 'hanzichi');sessionStorage.age = '10';// 读取var name = sessionStorage.getItem('name'); // hanzichivar age = sessionStorage.age; // 10// 遍历for (var i = 0, len = sessionStorage.length; i < len; i++) { var key = sessionStorage.key(i); var value = sessionStorage.getItem(key); console.log(key, value);}// age 10// name hanzichi// 也可以用 for infor (var key in sessionStorage) { console.log(key, sessionStorage.getItem(key));}// 删除delete sessionStorage.name;sessionStorage.removeItem('age');

因为 sessionStorage 对象绑定于某个服务器会话,所以当文件在本地运行的时候是不可用的。sessionStorage 对象应该主要用于仅针对会话的小段数据的存储,如果需要跨域会话存储数据,那么就要使用 localStorage 了。

localStorage

localStorage 和 sessionStorage 大抵相同。可以多页面访问同一个 localStorage 对象,但是页面必须来自同一域名(子域名无效),使用同一种协议,同一个端口(同源策略)。

关于 localStorage 的使用方法,可以参考上面 sessionStorage 的使用。

Storage 事件

对 Storage 对象进行任何修改,都会在文档上触发 Storage 事件。当通过属性或 setItem() 方法保存数据,使用 delete 操作符或者 removeItem() 删除数据,或者调用 clear() 方法时,都会发生该事件。这个事件的 event 对象有如下属性。

domain 发生变化的存储空间的域名 key 设置或者删除的键名 newValue 如果是设置值,则是新值;如果是删除键,则是 null oldValue 键被更改之前的值

遗憾的是,webkit(chrome)还不支持这个事件,尽管 IE8 以及 ff 支持其部分属性,但因为 chrome 的不支持,注定其到目前为止只是个鸡肋。

EventUtil.addHandler(document, 'storage', function(e) { console.log(e.domain, e.key, e.newValue, e.oldValue);});


相关阅读:
Top