cookie、sessionStorage、localStorage的区别

三者简述

cookie在html5还没有出来之前cokie本身用于客户端和服务端通信， 但是有本地存储的功能，就被借用了。

localStorage和sessionStorage是html5专为存储而设计，最大5M ，因为是h5的新特性，所以有的浏览器还不兼容

三者的异同

比较项目	cookie	localStorage	sessionStorage
生命周期	可以自己设置失效时间，如果没有设置，则关闭后失效。	除非手动清除，否则永久保存。	浏览器关闭后就被清除了
存储大小	4k	5M	5M
http请求	每次http请求都带着，影响性能。	只在客户端存储，不参与服务端的通信。	只在客户端存储，不参与服务端的通信。
易用性	api需要自己封装	api简单易用	api简单易用

localStorage和sessionStorage倆者唯一的区别就是生命周期，localStorage可以用于页面间传递数据，sessionStorage可以用来存储临时数据

三者的写法

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');