JS 之 cookie + localStorage 实践记录---实现：多选项卡网页，在刷新页面后，显示刷新前打开的选项卡

要实现的功能是这样：

1、一个后台管理系统，有多个选项卡页面，当打开多个页面时，刷新浏览器之后，除了主页面，其他页面一律消失

2、需要的效果：当打开多个页面时，刷新浏览器之后，显示  主页面  和  上一次打开的最后一个页面

===============分割线================

思路：需要在前端实时存储最后一个打开的选项卡。在JS 内部存储肯定不行，一旦刷新所有变量值都消失，转而寻求浏览器存储。

cookie、localStorage和sessionStorage 区别：https://blog.csdn.net/amyloverice/article/details/82906042

1、cookie 默认随浏览器关闭而消失，刷新时不消失。可以直接将选项卡信息存储在 cookie；

2、localStorage  一旦设置，会一直存在，即使关闭了客户端（浏览器)，它也依旧存在，属于本地持久层储存。需要手动清除。

3、sessionStorage  用于本地存储一个会话（session）中的数据，如果说这个会话临时关闭了，那么数据也会消失，页面刷新和浏览器关闭都会消失。

比较：

cookie 属于键值对存储，存取格式繁琐，且每次HTTP请求都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题；

localStorage  存取格式简单，多个数据项可直接封装成对象存储；但需要手动清除 。            

sessionStorage 的生命周期不符合需求。  【后两者仅在客户端（即浏览器）中保存，不参与和服务器的通信】

===============分割线================

综合考虑之下，采用  cookie（哨兵）+ localStorage（存储信息） 的方式来实现。

参考：如何让window.localStorage在关闭浏览器时清除数据缓存

JS 浏览器cookie的设置，读取，删除

【扩展：理解cookie的path和domain属性】

第一部分：cookie 操作函数

//设置cookie    
function setCookie(key, value, seconds) {    
 seconds = seconds || 0;   //seconds有值就直接赋值，没有为0，
 var expires = "";    
 if (seconds != 0 ) {      //设置cookie生存时间    
    var date = new Date();
    date.setTime(date.getTime()+(seconds*1000));    
    expires = "; expires="+date.toGMTString();    
 }    
 document.cookie = key+"="+encodeURI(value)+expires+"; path=/";   //转码并赋值    
} 

//取得cookie    
function getCookie(key) {    
    var keyEQ = key + "=";  
    var arr1 = document.cookie.split(';');    //把cookie分割成组    
    for(var i=0;i < arr1.length;i++) {    
        var c = arr1[i];                     //取得字符串    
        while (c.charAt(0)==' ') {           //判断一下字符串有没有前导空格    
            c = c.substring(1,c.length);      //有的话，从第二位开始取    
        }
        if (c.indexOf(keyEQ) == 0) {       //如果含有我们要的key    
            return decodeURI(c.substring(keyEQ.length,c.length));    //解码并截取我们要值    
        }    
    }    
    return false;    
} 

//移除cookie的函数
function removeCookie(key){
  setCookie(key,"",-1);//把cookie设置为过期
}

第二部分：localStorage 操作函数

//JS 对象 封装选项卡信息
var activeCardInfo ={
   "id":"",
   "title": "",
   "url": ""
}

//localStorage 保存 选项卡信息 
activeCardInfo.id = "1";
activeCardInfo.title = "2";
activeCardInfo.url = "3";
            
localStorage.setItem("activeCard", JSON.stringify(activeCardInfo)); 

//获取 localStorage 中的值
var cardInfo = JSON.parse(localStorage.getItem("activeCard")); 
if(typeof(cardInfo)!=null){
    console.log(cardInfo.id+" "+cardInfo.title+" "+cardInfo.url);
}

//清除 localStorage
localStorage.clear();

第三部分：cookie 和 localStorage 结合 （每次进入页面时执行）

$(function(){
    
    //cookie 不存在，说明浏览器关闭重启，要清除 localStorage
    if(!getCookie('tabCard_cache')){  
        localStorage.clear();
        setCookie('tabCard_cache',true);
    }
    else{
        var cardInfo = JSON.parse(localStorage.getItem("activeCard")); 
        if(typeof(cardInfo)!=null){
            console.log(cardInfo.id+" "+cardInfo.title+" "+cardInfo.url);

            //下面开始你自己的添加选项卡的逻辑……
        }
    }

});

===============分割线================

另一个本地离线存储方案：JS库localforage。突破本地离线存储5M限制，且可以存储各种复杂数据类型。

https://www.zhangxinxu.com/wordpress/2018/06/js-localforage-localstorage-indexdb/

说说浏览器缓存里的websql与 indexeddb

===============分割线================

仍然存在的问题【与数据存储无关】：

由于主页上有 Echarts 表格，页面初始化的时候，只显示主页时没问题，如果要同时显示另一个页面，

会报错：echarts NS_ERROR_FAILURE，此时主页上的 Echarts 无法显示。

类似这个链接描述的问题：https://www.oschina.net/question/1784922_193019

暂时的解决办法：延时添加新选项卡

setTimeout(function (){
   //添加选项卡代码
}, 3000);

目前正在寻找解决方案。