浏览器缓存：Cookie、LocalStorage、SessionStorage的区别

浏览器缓存：Cookie、LocalStorage、SessionStorage的区别

1、Cookie

cookie 是存储在本地的数据，本身非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

2、LocalStorage

仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

（1）创建和访问localStorage

设置数据：

var forgetData = {phone:vm.phone}
localStorage.setItem("forgetData",JSON.Stringfy(forgetData)); //forgetData是存储在localStorage里边的本地数据
Json.Stringfy(forgetData)//将数据转化为字符串格式

获取数据

 vm.forgetData=JSON.parse(localStorage.getItem("forgetData")); //将字符串转化为JSON化；

(2)

设置：localStorage.name = "zhao";

获取：localStorage.name    //zhao     
   localStorage.setItem(key,value);
//设置数据      
  localStorage.getItem(key);
//获取数据       
 localStorage.removeItem(key);
//删除单个数据     
   localStorage.clear();
//清除所有localStorage的数据

3、sessionStorage

sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同，做过后端的同学都知道Session这个词，翻译过来就是会话。而sessionStorage是前端的一个概念。它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是叶敏啊关闭后，sessionStorage中的数据就会被清空。

4、三者区别

（1）生命周期不同

Cookie 一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭后失效。

localStorage 除非被永久清除，否则永久保存。

sessionStorage 仅在当前会话会有效，关闭页面或浏览器后被清除

（2）存放数据的大小不同

Cookie 一般为4kb

localStorage 和 sessionStorage 一般为5mb

（3）与服务器端通信不同

Cookie 每次都会携带HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage 和 sessionStorage 仅在客户端（即浏览器）中保存，不参与和服务器的通信。

（4）易用性

Cookie 需要程序员自己来封装，原生的cookie接口不够友好

localStorage 和 sessionStorage 原生接口可以接受，可以封装来对Object和Array有更好的支持。