cookie、sessionStorage和localStorage存储方式的区别

一、使用方法相关

1.cookie相关

1.保存到本地（过期时间不设置的话默认浏览器关闭失效）

function setCookie(name,value) { 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
}

1.2读取cookie

function getCookie(name) { 
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); 
　　 return (arr=document.cookie.match(reg))?unescape(arr[2]):null;
}

1.3删除cookie（将cookie设置过期即可）：

function delCookie(name) { 
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    var cval=getCookie(name); 
    if(cval!=null) 
        document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
}

2.Storage相关（sessionStorage和localStorage使用方法相同）

2.1保存数据到本地（需要转为字符串的方式存储，通过JSON.stringify将对象字符串化，获取时通过JSON.parse再转为对象）

const info = {
        name: 'Lee',
        age: 20,
        id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));

2.2. 从本地存储获取数据 getItem() 方法

var data1 = JSON.parse(sessionStorage.getItem('key'));    
var data2 = JSON.parse(localStorage.getItem('key'));

2.3本地存储中删除某个保存的数据

sessionStorage.removeItem('key');
localStorage.removeItem('key');

2.4删除所有保存的数据

sessionStorage.clear();
localStorage.clear();

2.5还可以对本地存储的值的变化进行监听

window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
})

二、cookie、sessionStorage和localStorage三者区别

1.生命周期：
cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效。
localStorage：除非被手动清除，否则将会永久保存。
sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

2.存放数据大小：
cookie：4KB左右。
localStorage和sessionStorage：可以保存5MB的信息。

3.http请求：
cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题（会占用一定带宽，如果过多的话占用更多带宽）
localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信。

4.易用性：
cookie：需要程序员自己封装，源生的Cookie接口不友好。
localStorage和sessionStorage：使用比较简单，api调用方便。（localStorage.setItem(key,value);  localStorage.getItem('key');  localStorage.removeItem('key'); localStorage.clear();）

5.应用场景：
cookie:
请求时会自动携带，适合发送时做权限验证；
个数尽量要少（不同浏览器对最大个数限制不一样；最大大小为4kb）；
每次请求都会自动携带，会浪费一定带宽；

localStorage：关闭浏览器不会清除,适用于存储一些不变的数据（例如：a.跨页面传参；b.临时保存一些数据，防止页面刷新后参数丢失）
sessionStorage: 关闭浏览器会清除数据,用于一些较为敏感的数据；

6.浏览器的支持情况：

6.1localStorage和sessionStorage：

兼容情况：

 

使用前需判断是否支持：

if(! window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    //主逻辑业务
}

6.2cookie

使用前判断：

if(navigator.cookieEnabled) {
  alert("你的浏览器支持cookie功能");//提示浏览器支持cookie  
} else {
  alert("你的浏览器不支持cookie");//提示浏览器不支持cookie   
}

说明：

推荐地址：https://blog.youkuaiyun.com/weixin_42614080/article/details/90706499

推荐地址：https://zhuanlan.zhihu.com/p/22388743

推荐：https://segmentfault.com/a/1190000012057010?utm_source=tag-newest

推荐：https://juejin.cn/post/6844903516826255373