QuotaExceededError: The quota has been exceeded. localStorage缓存超出限制

今天在项目中遇到了一个问题，localStorage存储超出限制。报错信息如标题。这个是因为最近做了一波优化，把导航栏和一些用户信息本地化存储，都放在localStorage里，也不是每个用户会出现这种问题。

其实同一个域名下可能存在几十上百条业务线，每条业务线都可能因为各种理由往 localStorage 里塞东西，跨页面传数据啦、缓存啦、离线化啦、性能优化啦...，5M 看起来很多，其实很快就用完了。而开发时基本无感知，是因为大家都只访问自己的业务，但用户会访问各种业务，时间一久，很容易就存满了，凡是严重依赖 localStorage 的业务流程都存在风险。

Hybrid APP：一种容易想到的方案是，当 localStorage 存满后降级到 sessionStorage 里。看上去没啥问题，但实际业务中 app 内 h5 页面跳转常常采用新打开 webview 的方式，这么做的好处是关闭一个 webview 可以直接回到上一个页面，而不用重新加载页面，对于订单填写这类带有状态的页面就很需要这么做。新打开 webview 等于新打开一个会话，而 sessionStorage 只能存在于同一个会话中，因此 sessionStorage 无法跨页面共享。

那降级到 cookie 里呢？cookie 一共才 50 个，总大小不超过 4k，作为 backup 过于脆弱，而且还会影响请求的效率。如果后端对请求头大小做了限制，还可能产生 413 错误，导致请求被拦截。

那降级到 url 上呢？很麻烦。比如有一个交互流程是这样的：页面 A => 页面 B => 页面 C，如果页面 A 的数据要传到页面 C，就得通过页面 B 做一层中转。而且 url 长度也是有限制的。

单页面应用在不影响业务的情况下，可以直接从localStorage里降到sessionStorage。

我们还可以求助客户端同学，通过 js bridge 提供一个仿 localStorage 的东西，不过要考虑版本的问题，新版 app 里使用了客户端提供的 store，怎么兼顾老版 app，而且还要考虑兼容浏览器、微信。所以这种方案也只能解决一部分问题，当然，如果 h5 的流量绝大多数都在 app 里，那么这种方案是可以解决一大部分问题的，不过客户端提供的存储可不见得比原生的存储可靠，还是得加 backup。

我们还可以求助后端同学，多加几个字段甚至多加几个接口，不过这涉及到核心业务流程的改造，风险不小，而且不见得能完全解决问题，也无法永久的解决问题。

我们还可以来一招互相伤害大法，那就是把别人存的东西都删掉。。。

还有一个很讨厌的事情：safari 在隐私模式下不支持 localStorage 的存取（ios11 以下），这种情况比较罕见，但如果出了客诉，也是个大坑。

localStorage 归根结底就两个作用：持久化存储与跨页面传数据。持久化存储不会出问题，存不进去就存不进去呗，取不出来就去其它地方取，或者不取。问题就出在跨页面传数据上，上一个页面因为 localStorage 存满导致数据没有写入，下一个页面读取数据为空，从而导致错误。

理想的方案

假设我们回到起点，从零建设前端工程，我们怎么避免 localStorage 存满的问题？

1、划分域名。各域名下的存储空间由各业务组统一规划使用

2、跨页面传数据：考虑单页应用、优先采用 url 传数据

3、最后的兜底方案：清掉别人的存储

 

目前的问题是它既不存，也不跳转，稍改动一下，如下：

try {
  localStorage.setItem("nearbycorp",JSON.stringify(this.state));
  localStorage.setItem('nearbycorp_scrolltop', $('.list .am-list-view-scrollview')[0].scrollTop);
}catch (err){
  console.log(err)
}finally {
  location.hash = "/customer/detail/" + corp.id;
}

因为该页面存的是跳转到另外一个hash时存储了当前页面的筛选条件和滚动高度，结果就是不会滚动到刚刚的浏览区域。对用户造成一定的影响。所以还是直接存储到sessionStorage里比较好，不会影响用户。

 

 

查询localStorage限制的网址： http://dev-test.nemikor.com/web-storage/support-test/

try {
      sessionStorage.setItem("nearbycorp",JSON.stringify(this.state));
      sessionStorage.setItem('nearbycorp_scrolltop', $('.list .am-list-view-scrollview')[0].scrollTop);
    }catch (err){
      console.log(err)
    }finally {
      location.hash = "/customer/detail/" + corp.id;
    }

当然，这个问题应该从项目创建就考虑到，不必要存到localStorage的数据尽量不要存，避免后面出现这种问题。