【前端存储】storage/cookie的异同

Cookie的数据信息存放在客户端浏览器上。
Session的数据信息存放在服务器上。
他俩都不支持跨域查看。

localStorage

存储大小：一般是5M左右。
存储特点：永久性存储；存储内容过多的话会消耗内存空间，导致页面变卡；不能被爬虫抓取到；隐私模式下面是不可读取的；遵循同源策略；只支持 string 类型的存储。

window.localStorage.setItem('name',JSON.stringify({a:1}) ) ;
//存储数据

JSON.parse(window.localStorage.getItem('name')) ;
//读取数据
        
localStorage.removeItem('name') ;
//删除指定数据

localStorage.clear();
//清空所有存储数据

localStorage.length     //得到总共存储的数据的条数
localStorage.key(n)     //得到第n项 key 的名称

//从安全性考虑的话，应该封装一个存储数据时的方法，将时间戳存入进去
//下次进入某个需要本地存储的页面是，与时间戳做对比，超出了范围就跳转登陆页或者其他

sessionStorage

与localsStorage的特性几乎一致，区别在于 存储是会话级的，当前浏览器窗口被关闭，存储就会被销毁。

cookie

存储大小：4kb左右，50条左右
存储特点：默认会话级，因为存储在浏览器内，所以仅关闭窗口并不会删除，要关闭整个浏览器才可以。

 //直接存取
document.cookie = `name=刘某`

// 5秒后过期
let nowTime = new Date() ;
nowTime.setTime(nowTime.getTime() + 5000 ) ;
document.cookie = `aa=13123;expires=${ nowTime};path=/;domain=.csdn.net`

//expires控制cookie的有效时间

//path:Cookie的使用路径。如果设置为“/sessionWeb/”，则只有contextPath为“/sessionWeb”的
//程序可以访问该Cookie。
//如果设置为“/”，则本域名下contextPath都可以访问该Cookie。注意最后一个字符必须为 “/” 。
        
//domain:可以访问该Cookie的域名。如果设置为“.google.com”，
//则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”
        
//cookie自带的api很少，增删改查需要自己封装

cookie插件 有关js-cookie插件的使用方法

// Cookies.set('name', 'cuzma' );  // 直接存取 
Cookies.set('arr', [1,2,3,4] );   
Cookies.set('obj', {age: 22,like:'ball'});   

Cookies.set('name', 'cuzma', { expires: 7 });  // 7天后失效

let time = new Date( new Date().getTime() + 15*60*1000 ) ;
Cookies.set('name', 'cuzma', { expires: time });    // 15分钟后失效

Cookies.get('name');     // 获取某一个存储   返回值为字符
Cookies.get('obj') ;     // 获取某一个存储   返回值为字符
Cookies.get() ;          // 获取所有存储     返回一个对象 所有的value都为字符 需要 JSON.parse()
// 因为存入进去之后取到的值都是字符类型，所以最好 存入字符 时将 变量名有所标记

Cookies.remove('name');    // 删除指定存储
        
Cookies.set('name', 'value', { expires: 7, path: '' }); 
//具体配置还需进一步阅读文档

前端小菜鸟，哪里写的不对，还请各位大佬快快指出，非常感谢。
转载请注明出处，谢谢。