详解JavaScript中localStorage使用要点

localStorage核心特性与存储限制

localStorage主要用于替代cookie，旨在解决cookie在读写操作上的不便以及容量受限的问题（关于cookie的更多细节可参考相关使用要点）。

localStorage具备以下几个显著特点：

首先，localStorage本质上是一个普通对象，因此适用于任何标准对象的操作方式。

其次，localStorage中存储的属性值必须为字符串类型。

这一点需要特别注意。若需将对象保存至localStorage，可通过拼接字符串的方式实现，例如：

var obj = {
"na=me": "chua",
age: 9
}
//拼接到localStorage
var str = "";
for(var i in obj){
str += encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]) + ";"
}
str = str.substring(0,str.length - 1);
localStorage.testObj = str;
//解析出来
var strA = localStorage.testObj.split(";");
var newObj = {};
for(var i = 0; i < strA.length; i++){
var tmp = strA[i].split("=");
newObj[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
}

此外，也可以利用JSON类将对象序列化为字符串进行保存，并在读取时将其反序列化为可用的JSON对象格式。

第三，localStorage的默认存储空间大小为5MB，且现代浏览器对其支持良好。

参考xiaowei0705关于HTML5 LocalStorage本地存储的切图说明。

本站提醒用户，在移动端使用时，通常需要后台开辟内存空间以支持该功能。

当存储容量超过限制（即5MB）时，会抛出“QUOTA_EXCEEDED_ERR”异常。

常用API操作方法

第四，localStorage本身提供了一系列内置方法：

添加键值对：使用localStorage.setItem(key, value)。

获取键值：使用localStorage.getItem(key)。

删除特定键值对：使用localStorage.removeItem(key)。

清除所有键值对：使用localStorage.clear()。

获取localStorage中的属性名称（即键名）：使用localStorage.key(index)。

此外，还有一个与普通对象不同的属性：

用于获取localStorage中保存的键值对总数：通过localStorage.length。

以下示例展示了如何遍历获取localStorage中的键值对：

for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
} 

移动端兼容性与异常处理

尽管应优先信任并使用原生方法操作localStorage，但在iPhone或iPad设备上，调用setItem()时偶尔会出现诡异的QUOTA_EXCEEDED_ERR错误。解决此问题的方法是在调用setItem()前先执行removeItem()。从这一兼容性问题来看，使用对象直接添加或删除键值对似乎更为便捷且兼容性更强。

storage事件机制与浏览器差异

第五，关于localStorage的事件机制：

localStorage的storage事件处理函数中无法取消存储动作。

该存储事件仅在浏览器检测到localStorage数据实际发生变化时触发通知。需注意，若当前存储区域为空，调用clear()不会触发事件；同样，若通过setItem()设置的值与现有值相同，事件也不会触发。仅当存储区域发生实质改变时才会触发，此时事件对象包含多个有用属性：

• storageArea：表示存储类型（Session或Local） • key：发生改变的键名 • oldValue：该键的原值 • newValue：该键的新值 • url*：发生改变的URL

注意：在早期规范中，url属性名为uri属性。部分较早发布的浏览器未包含此变更。为确保兼容性，在使用url属性前应先检查其是否存在；若不存在，则应使用uri属性。

补充说明：在Firefox和Chrome中，数据的存储与读取均正常，但对storage事件的触发存在差异。Chrome中修改localStorage会触发当前页面的storage事件；而Firefox中自身页面修改storage后不会触发window的storage事件，但若同时访问A.html和B.html，在A页面进行setItem会触发B页面中window的storage事件，反之亦然。在IE9中，页面自身的设值能触发当前页面的storage事件，同时也能触发同一“起源”下其他页面window的storage事件，这种表现似乎更易于理解。实例推荐参考PrimeTechBlog的初试WebStorage之localstorage。

因此建议，为兼容不同浏览器或自行编写兼容处理函数，或者干脆不使用storage事件。

以下是具体实例代码：

if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};
function handle_storage(e) {
if (!e) { e = window.event; }
//响应代码部分 ...
} 

进阶使用技巧与注意事项

补充一些细节：

localStorage必须通过域名访问的方式才能生效。

如果调用clear()方法，key、oldValue和newValue均会被设置为null。

localStorage的使用方式保持一致：

• localStorage：无时间限制的数据存储 • sessionStorage：针对单个会话（session）的数据存储

localStorage提供了以下具体方法：

1、存储：localStorage.setItem(key, value)

若key已存在，则更新其value值。

2、获取：localStorage.getItem(key)

若key不存在，则返回null。

3、删除：localStorage.removeItem(key)

一旦执行删除操作，key对应的数据将被彻底清除。

4、全部清除：localStorage.clear()

有时逐个使用removeItem删除过于繁琐，可使用clear()，但其后果是清除localStorage中保存的所有数据。

5、遍历localStorage存储的key：

.length：数据总量，例如：localStorage.length .key(index)：获取指定索引的key，例如：var key = localStorage.key(index);

6、存储JSON格式数据：

JSON.stringify(data)：将对象转换为JSON格式的数据串，返回转换后的字符串 JSON.parse(data)：将数据解析为对象，返回解析后的对象

备注：localStorage存储的数据无法跨浏览器共用，每个浏览器只能读取各自浏览器的数据，且存储空间限制为5MB。