好程序员教程之HTML5中的storage 如何使用

HTML5中，咱们经常用到storage，那这个storage究竟是什么？有啥用呢？ 其实，storage是个很简单的东西，只要熟悉JavaScript中对象的童鞋，看完小编本文的分享，对storage的概念及用法应该都能掌握个七七八八了。 在HTML5中，你能够吧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', '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 对象有以下属性：

一、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); }); 以上就是html5中，涉及到的storage相关内容及其使用方法，若是你们在前端开发中，须要实现上述功能，不妨能够试试上述方法。