HTML5中的storage 如何使用

html5中，我们常常用到storage，那这个storage到底是什么？有啥用呢？其实，storage是个很简单的东西，只要熟悉JavaScript中对象的童鞋，看完小编本文的分享，对storage的概念及用法应该都能掌握个七七八八了。

在HTML5中，你可以吧storage 想象成是储存在客户端（浏览器）中的一些 javascript 对象，那么有什么用呢？举个简单的例子，百度搜索会把你每次的搜索关键字用 storage（localStorage）存储下来，那么下次你再搜索相同的内容的时候，它会优先将你曾经搜过的内容进行下拉展示。关于 storage 的内容，可以用 chrome 下的 Resources 面板进行查看。

方法：

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

也可以用点语法和方括号语法来访问设置，但是建议用上面的方法。除此之外，还需要注意的一点就是 value 必须是字符串。

sessionStorage

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

// 设置
sessionStorage.setItem('name', 'maiziedu');
sessionStorage.age = '10';
// 读取
var name = sessionStorage.getItem('name'); // maiziedu
var 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 maiziedu
// 也可以用 for in
for (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 对象有如下属性：

1、domain 发生变化的存储空间的域名
2、key 设置或者删除的键名
3、newValue 如果是设置值，则是新值；如果是删除键，则是 null
4、oldValue 键被更改之前的值

遗憾的是，webkit（chrome）还不支持这个事件，尽管 IE8 以及 ff 支持其部分属性，但因为 chrome 的不支持，注定其到目前为止还无法广泛使用。

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

以上就是html5中，涉及到的storage相关内容及其使用方法，如果大家在前端开发中，需要实现上述功能，不妨可以试试上述方法。

链接: https://fly63.com/article/detial/2517