本地存储（localStorage）已经不是新鲜的概念，本文并不是本地存储的概念及 API 介绍，而是对本地存储在实际业务场景中的一些问题做些探讨，从而形成一套规范，保证本地存储在提高页面性能、提升用户体验的同时，避免出现莫名其妙的错误。

本文试图回答如下问题：

本地存储满了之后，浏览器是什么样的行为？本地存储容量有限，因此宝贵，那么就整个站点而言，使用本地存储的策略是什么？实际编码过程中，本地存储又有那些注意事项？本地存储的空间（SIZE）让人意外的是，这一点在各主流浏览器（包含PC、移动端）竟然惊人的一致，都是 5M 的数量级。 值得说明的是，安卓上手 Q 、手机QQ浏览器、微信中则是 2.5M 的数量级，因此在移动端，本地存储的 SIZE 更加珍贵。IOS 待测试。 综上，SIZE 在 2 - 5M 的区间。 测试页面： Web Storage Support Test

超过最大值的行为各浏览器也惊人的一致，都是抛出一个错误 QUOTA_EXCEEDED_ERR 。在 firefox 以及 opera 中，用户可以自己设置本地存储的大小。 整站本地存储的规划客户端的存储空间宝贵，然而站点也因为业务的不同，很难有一个统一的实施细则，但是有几个大原则不会变。

只保存重要页面的重要数据典型的，首页首屏对业务庞大的站点，这点尤其重要极大提高用户体验的数据比如表单的状态，可以提交之前保存，当用户刷新页面时可以还原静态资源，比如 js 和 css一个请求一个 key 值（一个 cgi 一个 key 值）避免请求链接加参数的 key (http://request-ajax.cgi[params])，这样必然让 key 值趋于冗余从而撑爆空间以上几大原则仅作参考，一切从实际业务出发。

本地存储注意事项不总是有用目前来说，localStorage 只能做为提升用户体验的手段，而不能成为客户端逻辑的可靠的、唯一的依赖，毕竟用户环境千差万别。 当不使用通用 local 库的情况下，务必作如下检查：

代码语言：javascript代码运行次数：0运行复制if (window.localStorage) {

try {

localStorage.setItem('bla', 'bla');

} catch (e) {

if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {

// todo

} else {

// todo

}

}

}key 过多这个在上面的“原则”里面也有说，key 值应该整站统一约束。先整理如下规则，待讨论。

页面 path 做为 key 值，该页面上的数据统一在 value 处理一条 cgi 一个 key 值，不同参数在 value 中处理（性能问题）序列化过于依赖 JSON.stringify ，性能问题，移动端尤其明显

value 尽量使用 string

// before function store(key, val) { localStorage.setItem(key, JSON.stringify(val)); } store('num', 1); store('on', true); store('name', 'pamela'); // after function store(key, val) { localStorage.setItem(key, val); } store('num', '1'); store('on', 'true'); store('name', 'pamela');

jsperf: Primitives vs. Stringsjsperf: Optional use of JSON stringify频繁 set/get代码语言：javascript代码运行次数：0运行复制// before

$('input[type="checkbox"]').click(function () {

localStorage.setItem($(this).attr('name'), $(this).is(':checked'));

});

// after

window.onunload = function () {

$('input[type="checkbox"]').each(function () {

localStorage.setItem($(this).attr('name'), $(this).is(':checked'));

});

};尽量将数据缓存进内存，然后页面卸载的时候一次写入。

阻塞UI参看文章，Nicholas Zakas: Responsive Interfaces 。

按钮在点击过程中会有 UI 变化，这个时候同步操作 local 就会阻塞 UI 。

代码语言：javascript代码运行次数：0运行复制// before

$('button').click(function () {

var name = localStorage.getItem('name');

$('#name').html(name);

});

// after

$('button').click(function () {

window.setTimeout(function () {

var name = localStorage.getItem('name');

$('#name').html(name);

}, 10);

});第三方库store.js 跨浏览器，ie6+ 。

lawnchair 轻量，为移动而生。

locache 又一通用库，优雅降级。提供超时 api 。

lscache

A localStorage-based memcache-inspired client-side caching library.

自动保存表单 autoStorageSavifyInject

CommonJS and AMD module loading, cross-origin fetching, localStorage caching, and more. basket.js

A script and resource loader for caching & loading files with localStorage参考文章THE PAST, PRESENT & FUTURE OF LOCAL STORAGE FOR WEB APPLICATIONSWeb Storage Support TestlocalStorage: Use it, Don't Abuse ItWhat happens when localStorage is full?How to find the size of localStorageCalculating usage of localStorage spaceWorking with quota on mobile browsers