cookie和localstorage sessionStorage的概念、区别、使用场景

本文分为三大板块：　　

　　1 webStorage的概念　　　　

　　2 cookie/localStorage/sessionStorage的介绍

　　3 三者之间的共同点和区别

**所有代码引用均来自

作者：OBKoro1
链接：https://juejin.im/post/5a191c47f265da43111fe859
来源：掘金

首先要明确一个概念 webStorage

webStorage：是h5提供的两种在web请求之间保存数据，有了本地数据就可以避免数据在浏览器和服务器之间不必要地来回传递。

它的好处是：

1 减少网络流量，一旦保存在本地以后就可以避免再向服务器请求数据了

2 性能好 从本地读取数据比从服务器获取快得多，加上浏览器有缓存几乎可以立即显示

使用场景：

从安全性上来说，每次http请求都会携带cookie，这样无形中浪费了网络资源，所以如非必要不用cookie。此外cookie还需要指定作用于，不可以跨域调用，限制比较多，但是用来识别用户登录，还是十分方便的。针对登录过的用户，服务器端会在登录时注入一段加密过的 唯一辨识单一用户的辨识码，下次只需要读取这个值就可以判断当前用户是否登录了

webStorage储存空间更大，而且数据储存后仅仅在本地，不会与服务器发生交互，因此不会浪费网络流量。并且有独立储存空间。具体细分的话，local接替了cookie管理购物车的工作，也能胜任其他工作，比如h5小游戏经常会产生一些本地数据，用local储存比较合适

session的话，有时候遇到一些内容很多的表单，为了优化用户体验，我们会把表单页面拆分成多个子页面（比如注册流程），这种情况就可以使用session了。

兼容性：

localStorage/sessionStorage IE8以上都支持，如果要兼容到IE6，就需要userData来储存

基本概念

cookie：大小限制在4kb左右，主要用途在于保存登录信息，比如某些网站的记住密码功能，保存在本地，生命周期有限制，可手动清除。

它的主要内容包括 名字、值、过期时间，路径与域一起构成cookie的作用范围，若不设置时间，默认关闭窗口后cookie消失，这种生命周期的cookie被称为会话cookie。

使用方式：

保存cookie值：

var dataCookie='110';
    document.cookie = 'token' + "=" +dataCookie; 

获取指定名称的cookie值：

 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：h5新加入的技术，兼容性较好，被IE8+浏览器支持，保存周期较长，可以保存5mb的信息，用于持久化本地储存，除非手动删除数据，不然是不会失效的。

使用方式：

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

sessionStorage：与上一个接口类似，但是保存数据的生命周期不同，仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

这个很有意思，只要浏览器或页面没关闭，刷新页面或者进入同源的另一个页面，数据仍然存在。同时打开同一页面的不同窗口，它的对象也是不同的。

说了这么多，来看一下总结性的三者的异同吧

特性	cookie	localStorage	sessionStorage
生命周期	可设置失效时间，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4kb	一般为5MB	一般为5MB
HTTP请求	每次都会携带在http请求头中，如果使用cookie保存过多数据会产生 性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

查看数据存放处：

最后要说的是：不要把什么数据都放在 Cookie、localStorage 和 sessionStorage中，毕竟前端的安全性这么低。只要打开控制台就可以任意的修改 Cookie、localStorage 和 sessionStorage的数据了。涉及到金钱或者其他比较重要的信息，还是要存在后台比较好。