使用localStorage必须了解的点

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

本文试图回答如下问题:

  1. 本地存储满了之后,浏览器是什么样的行为?
  2. 本地存储容量有限,因此宝贵,那么就整个站点而言,使用本地存储的策略是什么?
  3. 实际编码过程中,本地存储又有那些注意事项?

本地存储的空间(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');

频繁 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.
  • 自动保存表单
  • Inject 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

参考文章

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

JAVA试练塔之试炼技能图

1.计算机基础: 1.1数据机构基础: 主要学习: 1.向量,链表,栈,队列和堆,词典。熟悉 2.树,二叉搜索树。熟悉 3.图,有向图,无向图,基本概念 4.二...

3617
来自专栏Java Edge

JDK7新特性概览JSR292:支持动态类型语言(InvokeDynamic)G1 垃圾回收器(Garbage-First Collector)JSR334:小的语言改进(Project Coin)核

58910
来自专栏微信公众号:Java团长

从零讲Java,给你一条清晰地学习道路!该学什么就学什么!

主要学习: 1.向量,链表,栈,队列和堆,词典。熟悉 2.树,二叉搜索树。熟悉 3.图,有向图,无向图,基本概念 4.二叉搜索A,B,C类熟练,9大排序熟悉。 ...

881
来自专栏FSociety

Python爬取猫眼「碟中谍」全部评论

评论算保存完了,近期会再做一个关于此次数据的可视化分析。另外阿汤哥真心太帅了,全程打肾上腺素,各位还没去看的赶紧~

620
来自专栏java思维导图

从零讲JAVA ,给你一条清晰地学习道路!该学什么就学什么!!

主要学习: 1.向量,链表,栈,队列和堆,词典。熟悉 2.树,二叉搜索树。熟悉 3.图,有向图,无向图,基本概念 4.二叉搜索A,B,C类熟练,9大排序熟悉。 ...

1385
来自专栏java工会

从零讲JAVA ,给你一条清晰地学习道路!该学什么就学什么!!

1677
来自专栏青青天空树

node.js+vue.js搭建程序设计类课程教学辅助系统

  毕业才刚刚两个多月而已,现在想想大学生活是那么的遥不可及,感觉已经过了好久好久,社会了两个月才明白学校的好啊。。。额,扯远了,自从毕业开始就想找个时间写下毕...

2211
来自专栏程序猿DD

极大提高工作效率的几十种神兵利器

来源:https://www.liutf.com/posts/3720794851.html

1653
来自专栏大数据挖掘DT机器学习

Python实现爬取知乎神回复

这篇文章主要介绍了Python实现爬取知乎神回复简单爬虫代码分享,本文实现了爬取知乎的“如何正确地吐槽”收藏夹,是对个人的一个兴趣实现,需要的朋友可以参考下。 ...

3265
来自专栏康怀帅的专栏

Ubuntu 常用软件

本文列举了 Ubuntu 常用软件。 娱乐 网易云音乐 http://music.163.com/#/download mpv 播放器 https://mpv....

4255

扫码关注云+社区