fe ? not exsit ?

localStorage知识点记录

用处

  1. 优化首屏

    • 可以缓存第一次请求接口数据进行渲染，之后真是请求接口在进行数据替换。 即appshell架构思想。

  2. 提高用户体验的数据

    • 缓存表单，刷新后仍可保存之前填写数据
    • 缓存js、css

  3. 跨页面之间通信

    • 网上有些封装的通信的例子。

兼容

无需担心

use

问题

  1. 本地存储空间有限。

    • 撑爆内存会如何？

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      let i = 0
         while (true) {
             try {
                 localStorage[`data-${i++}`] = JSON.stringify({ date: (new Date).toString() })
             } catch(e) {
                 // exceeded the quot
                 console.log(e)
                 break;
             }
         }

      结果会是一个期望值内存溢出。

  2. 依赖JSON.stringify 造成性能问题

  3. 频繁使用get、set取值设置

  4. 在某些iPhone/iPad上有时调用setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误。解决方法是在setItem之前先removeItem()。所以从这个兼容问题来看，貌似使用对象添加/删除键值对更方便一些，兼容也更强一些。

  5. 如若ui事件线程在其后，会阻塞ui thread。

建议使用

  1. 检测和异常捕捉
1
2
3
4
5
6
7
8
9
try {
    localStorage && localStorage['xxx'] = xxx;
} catch (e) {
    if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
        // todo
    } else {
        // todo
    }
}

  1. 尽量使用string，避免键值被JSON.stringify双重字符串化。即使使用原值会比string执行快那么一点点。

    click test

  2. 存储大小弥足珍贵， 谨慎设置key的数量。