前端面试题二--cookie、sessionStorage、localStorage的区别

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