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);
目前正在寻找解决方案。