使用localStorage必须了解的点

IMWeb前端团队

发布于 2019-12-03 18:01:40

1.2K00

代码可运行

文章被收录于专栏：IMWeb前端团队IMWeb前端团队

运行总次数：0

代码可运行

本文作者：IMWeb 江源原文出处：IMWeb社区 未经同意，禁止转载

本地存储（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 库的情况下，务必作如下检查：

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. Strings](http://jsperf.com/passing-strings-vs-primitive-in-localstorage)
    - [jsperf: Optional use of JSON stringify](http://jsperf.com/json-stringify-or-string-for-localstorage)

频繁 set/get

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

// 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.
自动保存表单

- [autoStorage](https://github.com/phunkei/autoStorage)
- [Savify](https://github.com/blackcoat/Savify)

basket.js A script and resource loader for caching & loading files with localStorage

参考文章

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015-06-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

存储

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度