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: '' });
//具体配置还需进一步阅读文档
前端小菜鸟,哪里写的不对,还请各位大佬快快指出,非常感谢。
转载请注明出处,谢谢。