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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

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 了。