cookie，localStorage和sessionStorage

1、Cookie

　　Cookie 是小甜饼的意思。cookie 很是小，它的大小限制为4KB左右。它的主要用途有保存登陆信息，好比你登陆某个网站市场能够看到“记住密码”，这一般就是经过在 Cookie 中存入一段辨别用户身份的数据来实现的。

　　cookie以文本的方式存于客户端，因为http协议是无状态的，只要客户端与服务端数据交换完，就会断掉连接，若是再请求就再次连接，而服务器是没法保存这种连接的状态，只有不停地连接、断连接，因此须要cookie来作一个身份认证，再次请求的时候服务器会根据这个身份id进行用户判断。

　   但要注意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赋值给变量。

2、localStorage

　　localStorage 是 HTML5 标准中新加入的技术，它并非什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而现在，localStorage 被大多数浏览器所支持。

3、sessionStorage

　　sessionStorage 与 localStorage 的接口相似，但保存数据的生命周期与 localStorage不一样。sessionStorage它只是能够将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

使用

　　localStorage和sessionStorage所使用的方法是同样的，下面以sessionStorage为例子：

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

4、三者的异同

 

 5、应用场景

　　由于每次http请求都会携带cookie信息，这样无形中浪费了带宽，因此cookie应该尽量少的使用，另外cookie还须要指定做用域，不能够跨域调用，限制比较多。

　　可是用来识别用户登陆来讲，cookie仍是比storage更好用的。其余状况下，可使用storage，就用storage。

　　而另外一方面 localStorage 接替了 Cookie 管理购物车的工做，同时也能胜任其余一些工做。好比HTML5游戏一般会产生一些本地数据，localStorage 也是很是适用的。若是遇到一些内容特别多的表单，为了优化用户体验，咱们可能要把表单页面拆分红多个子页面，而后按步骤引导用户填写，这时候 sessionStorage 的做用就发挥出来了。