为什么要进行数据存储

??????随着Web应用程序的出现，产生了对于能够直接在客户端上存储用户信息能力的要求，我们知道当我们访问某个页面的时候，很多东西都需要从服务器端进行加载，如果这个时候能将一些东西存储在客户端的话，是不是就可以直接拿来用啦，方便快捷，又可以节省了很多不必要的请求，为什么不用呢？

Cookie

??????说到cookie，cookie存储是属于文档对象模型。cookie有两个主要功能：第一个功能就是用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态；而第二个功能也就是我们现在经常使用cookie在客户端存储数据。

Cookie的构成

名称：唯一的、确定的cookie的名称
值：存储在cookie中的字符串值，该值必须被URL编码
域：cookie对于哪个域是有效的，所有向该域发送的请求都会包含这个cookie信息
路径：对于指定域中的路径，应该向服务器发送cookie
失效时间：表示cookie何时应该被删除的时间戳
安全标志：指定后，cookie只有在使用SSL连接的时候才发送到服务器

如何使用cookie存储数据

??????有两种方式可以生成cookie，一种是服务器发送http响应时指定Set-Cookie进行指定；另一种我们可以使用js生成cookie。
示例：

var  CookieNow={
 get: function(name) { 
            var cookieName = encodeURIComponent(name) + "=",cookieStart = document.cookie.indexOf(cookieName),cookieValue = null; 
              if(cookieStart > -1) {
                  var cookieEnd = document.cookie.indexOf(";", cookieStart); 
                  }
               if (cookieEnd == -1) {
                  cookieEnd = document.cookie.length;
               }
           cookieValue=decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
         } 
         return cookieValue;
    },
       set: function(name, value, expires, path, domain, secure) { 
         var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);          
         if(expires instanceof Data) {
            cookieText += ";expires=" + expires.toGMTString();
        } if(path) {
            cookieText += ";path=" + path;
        } if(domain) {
            cookieText += ";domain=" + domain;
        } if(secure) {
            cookieText += ";secure";
        }
        document.cookie = cookieText;
    }
}

比如我们想在cookie中存放是否点击的状态时：

     CookieNow.set("ifClick", "true");

当我们想得到是否点击的状态，可以这样拿到数据：

      CookieUtil.get("ifClick");

Cookie的缺点

cookie需要在客户端和服务器端之间来回传送，会浪费不必要的资源。
cookie的存储大小有限制，对于每个域，一般只能设置20个cookie，每个cookie大小不能超过4KB。
cookie因为保存在客户端中，包含的任何数据都可以被他人访问，cookie安全性比较低。

web存储机制

什么是Web存储

??????Web Storage也是一种在客户端存储数据的一种机制，主要的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须将数据在客户端和服务器之间来回的进行传送，并且可以存储大量的跨会话的数据。一般来说，Web Storage包含了两种对象的定义，sessionStorage和LocalStorage。

sessionStorge

??????首先，session的意思是会话，一次会话是指浏览器从打开到关闭的过程。浏览器关闭，会话结束。而sessionStorage对象是存储特定于某个会话的数据，也就是数据只保存到浏览器关闭，会在浏览器关闭后消失，存储在sessionStorage中的数据可以跨越页面刷新而存在。

sessionStorage.setItem("ifClick", "true"); // 使用方法存储数据
sessionStorage.ifClick = "true";// 使用属性存储数据

//获取数据
sessionStorage.getItem("ifClick");

特点：

同源策略限制.若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。
单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
只在本地存储，seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。
存储方式，seesionStorage的存储方式采用key、value的方式。
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

LocalStorage

??????sessionStorage和localStorage有很多共同的特点，localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储。

window.localStorage.setItem('myCat', 'Tom');  // 设置
let cat = window.localStorage.getItem('myCat'); // 读取
window.localStorage.removeItem('myCat');  // 移除
window.localStorage.clear();  // 清空所有
window.localStorage.key(1); // 读取索引为1的值
window.localStorage.length; // 数目