js缓存cookie、localStorage、sessionStorage

cookie、localStorage、sessionStorage的区别

cookie：设置cookie后，cookie每次请求都会在头上带上cookie信息。cookie在设置的时候如果不设置过期时间，就表示是个会话cookie，以前我以为关闭浏览器会话cookie就消失了，然而在多数情况下windows系统或者安卓系统确实是这样的。但是在macOS系统或者ios系统中，关闭浏览器并不会清除掉会话cookie，结束浏览器进程才行。

localStorage：localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。满了的情况下仍继续存储并不会覆盖其他的值，而是直接报错(QuotaExceededError)，并且当前存储的值也会被清空。浏览器支持每个域名下存储5M数据。

sessionStorage：sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。假设你在A页面存储了sessionStorage，新开选项卡将A页面的链接粘贴进去打开页面，sessionStorage也是不存在的。所以sessionStorage存在的条件是页面间的跳转，A页面存储了sessionStorage，他要通过超链接或者location.href或者window.open来打开另一个同域页面才能访问sessionStorage。

cookie的使用

/*设置cookie*/
function setCookie(name, value, iDay)
{
  var oDate=new Date();
  oDate.setDate(oDate.getDate()+iDay);
  document.cookie=name+'='+value+';expires='+oDate;
};
/*使用方法：setCookie('user', 'simon', 11);*/
/*获取cookie*/
function getCookie(name){
    var arr=document.cookie.split('; ');//多个cookie值是以; 分隔的，用split把cookie分割开并赋值给数组
    for(var i=0;i<arr.length;i++){//历遍数组
        var ars=arr[i].split('=');//原来割好的数组是：user=simon，再用split('=')分割成：user simon 这样可以通过arr2[0] arr2[1]来分别获取user和simon
        if(ars[0]==name){//如果数组的属性名等于传进来的name
        return ars[1];//就返回属性名对应的值
        }
    }
    return ''; //没找到就返回空
}
/*使用方法：getCookie('user')*/
/*删除cookie*/
function removeCookie(name){
  setCookie(name, 1, -1); //-1就是告诉系统已经过期，系统就会立刻去删除cookie
};
/*使用方法：removeCookie('user')*/
1.正数：将Cookie写入浏览器所在电脑的硬盘，持久化存储，到时间自动删除。
2.负数：默认值，Cookie在当前浏览器内存中，当浏览器关闭，则Cookie被销毁。
3.零：删除对应Cookie。

localStorage的使用

//创建
localStorage.setItem('name','张三')//第1种
localStorage.name = '张三';//第2种
// 获取
localStorage.getItem('name')// 张三
localStorage.name; // 张三
// 删除
localStorage.removeItem('name')
delete localStorage.name;
// 清除全部
localStorage.clear();
// 遍历
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i); // 获取本地存储的Key
    localStorage[key]; // 获取本地存储的value
}

sessionStorage的使用

//创建
sessionStorage.setItem('name','张三')//第1种
sessionStorage.name = '张三';//第2种
// 获取
sessionStorage.getItem('name')// 张三
sessionStorage.name; // 张三
// 删除
sessionStorage.removeItem('name')
delete sessionStorage.name;
// 清除全部
sessionStorage.clear();