1、cookie
在html5还没有出来之前cokie本身用于客户端和服务端通信, 但是有本地存储的功能,就被借用了。
2、localStorage和sessionStorage
html5专为存储而设计,最大5M ,因为是h5的新特性,所以有的浏览器还不兼容
3、三者的异同
生命周期
cookie:可以自己设置失效时间,如果没有设置,则关闭后失效。
localStorage:除非手动清除,否则永久保存。
sessionStorage:浏览器关闭后就被清楚了。
存储大小
cookie:存储量只有4k
sessionStorage和localStorage有5M
http请求
cookie:每次http请求都带着,影响性能。
sessionStorage和localStorage只在客户端存储,不参与服务端的通信。
易用性
cookie:api需要自己封装
sessionStorage和localStorage:api简单易用
localStorage和sessionStorage倆者唯一的区别就是生命周期,localStorage可以用于页面间传递数据,sessionStorage可以用来存储临时数据
4、三者的写法
cookie
var dataCookie='110';
document.cookie = 'token' + "=" +dataCookie;
function getCookie(name) { //获取指定名称的cookie值
// (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串,match[i]为正则表达式捕获数组相匹配的数组;
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) {
console.log(arr);
return unescape(arr[2]);
}
return null;
}
var cookieData=getCookie('token'); //cookie赋值给变量。
localStorage和sessinStorage
var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//存储数据
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//获取全部数据
console.log(dataAll,'获取全部数据');
var dataSession=sessionStorage.getItem(name);//获取指定键名数据
var dataSession2=sessionStorage.sessionData;//sessionStorage是js对象,也可以使用key的方式来获取值
console.log(dataSession,dataSession2,'获取指定键名数据');
sessionStorage.removeItem(name); //删除指定键名数据
console.log(dataAll,'获取全部数据1');
sessionStorage.clear();//清空缓存数据:localStorage.clear();
console.log(dataAll,'获取全部数据2');