localstorage和sessionStorage，使用localstrong缓存到本地，获取本地缓存大小

Web Storage是HTML5提出的本地存储机制，主要目的是克服cookie的一些限制，当数据需要被严格控制在客户端上时，无需持续的将数据发回服务器。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。
获取localStorage的大小。

  let loc = window.localStorage;
    var size;
    console.log("这里直接打印即可看见大小", loc);
    for (const key in loc) {
      if (loc.hasOwnProperty.call(loc, key)) {
        size = loc[key].length / 1024;
        console.log("==========", loc[key].length / 1024, size > 10);
      }
    }

使用localstrong缓存到本地，并实时更新

created 页面初始化判断是否存在此key ‘trtcRecord’

    try {
    
    
    let tableDatas=JSON.parse(localStorage.getItem('trtcRecord'));
        that.pagesTotal=tableDatas.length;
        that.tableDatas=tableDatas.slice(0,5);
    } catch (error) {
    
    
       let trtcRecord = [];
      localStorage.setItem("trtcRecord", JSON.stringify(trtcRecord));
    }

mounted 里面监听变化

 var that=this;
        // 本地存储变化更新视图层的数据
       //根据自己需要来监听对应的key
        window.addEventListener("setItemEvent",function(e){
    
    
           let loc = window.localStorage;
            // console.log("这里直接打印即可看见大小", loc);
            for (const key in loc) {
    
    
              // 本地存储设置最多2M
              // console.log('当前已用存储：' + (loc['trtcRecord'].length / 1024).toFixed(2) + 'KB');
              let localSize=loc['trtcRecord'].length/1024
              if(localSize>2*1024){
    
    
                that.$message.warning('本地存储上限,将清空部分通话缓存');
                let data=that.tableDatas.splice(0,50);
                that.pagesTotal=data.length;
                window.localStorage.setItem('trtcRecord',JSON.stringify(data));
                // that.$route.replace('/');
              }
            }
        })