测试需要了解的前端缓存localstorage、sessionstorage、indexedDB、cookie

cookie

在h5之前，一般使用cookie来存，但是缺点很明显

1、使用不方便，没有对应的方法可以方便的存取存储的数据，需要我们自己去封装对应方法。
2、存储空间大小太小，通常为4KB，具体大小和浏览器自己实现有关。
3、存储的数据条数有限制，具体数量各个浏览器也可能不同。
4、与服务器端通信时，每次都会把此时域名、路径下相应cookie放在HTTP 请求头 Cookie 上，本次请求不需要的数据也可能会被带上，浪费了带宽和流量

所以后面h5引入了localstorage、sessionstorage，目前cookie一般用来存认证用户的信息等

sessionstorage

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。针对他的这种特性，有的时候我们业务时要新开一个带状态的tab页时，就不适合用sessionstorage来缓存该页面上的状态信息，比较适合用localstorage

1、页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
2、在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。
3、打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
4、关闭对应浏览器tab，会清除对应的sessionStorage。

localstorage

kv键值对存储，容量有5M，下面是两个小程序，持久化存储，没有过期时间。同一个域名共享一个localstorage。所以有些产品功能模块非常多的时候，可能会有localstorage被存满的风险。存满之后

下面几种方法是常见的预防被存满的解决方案：

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

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

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

4、使用indexedDB来存储文件或者大容量的信息

下面两个是获取最大容量和剩余容量的小程序

#获取localstorage剩余容量
(function(){
    if(!window.localStorage) {
        console.log('浏览器不支持localStorage');
    }
    var size = 0;
    for(item in window.localStorage) {
        if(window.localStorage.hasOwnProperty(item)) {
            size += window.localStorage.getItem(item).length;
        }
    }
    console.log('当前localStorage剩余容量为' + (size / 1024).toFixed(2) + 'KB');
})()

#获取最大容量
(function() {
   if(!window.localStorage) {
   console.log('当前浏览器不支持localStorage!')
   }    var test = '0123456789';
   var add = function(num) {
     num += num;
     if(num.length == 10240) {
       test = num;
       return;
     }
     add(num);
   }
   add(test);
   var sum = test;
   var show = setInterval(function(){
      sum += test;
      try {
       window.localStorage.removeItem('test');
       window.localStorage.setItem('test', sum);
       console.log(sum.length / 1024 + 'KB');
      } catch(e) {
       console.log(sum.length / 1024 + 'KB超出最大限制');
       clearInterval(show);
      }
   }, 0.1)
 })()

indexedDB

IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法， 允许储存大量数据，提供查找接口，还能建立索引。 IndexedDB 的兼容性也还不错，基本上不兼容太老的浏览器，都还是可用的。

 

 

 

参考 https://www.talktocomputer.site/blogs/92/

https://www.cnblogs.com/kidney/p/9058352.html

https://juejin.cn/post/6844904054728949774