客户端数据存储——cookie和webStorage

在客户端存储用户信息的常用方法就是通过cookie和webStorage，这篇文章介绍cookie和webStorage的使用方法和区别所在

HTTP Coolkie，通常直接叫做cookie，最早的一个在客户端存储数据的方案，在客户端用于存储会话信息，该标准要求在服务器对任意HTTP请求发送Set-Cookie HTTP 头作为相应的一部分

限制

cookie在性质上是绑定在特定的域名下，当设定了一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie。这个限制确保了存储在cookie中的信息只能让批准接受者访问，而无法被其他域访问
数量限制（可以确保cookie不被恶意使用，同时不会占用太多的磁盘空间）
- IE6或更低版本最多20个cookie
- IE7和之后的版本最后可以有50个cookie。
- Firefox最多50个cookie
- chrome和Safari没有做硬性限制
超过单个域名限制之后，还要设置cookie的话，浏览器会清除以前设置的cookie
cookie的大小最好限制在4059B以内

优点：极高的扩展性和可用性

分担了服务器存储的负担
通过良好的编程，控制保存在cookie中的session对象的大小。
通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
控制cookie的生命期，使之不会永远有效

缺点

除了上面的数量和大小的限制，还有安全问题，如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了

cookie的组成

名称：一个唯一确定cookie的名称，不区分大小写，名称必须经过URL编码
值：存储在cookie中的字符串值，必须经过URL编码
域：对哪些域有效
路径：对于指定域中的哪个路径，应该像服务器发送cookie
失效时间：cookie何时因该被删除，默认情况下，浏览器会话结束时将所有的cookie删除
安全标志：指定后，cookie只有在使用SSL连接时才发送服务

Set-Cookie: name=value; expires=Mon, 22-Jan-17 07:10:24 GMT; domain=.wrox.com; path=/; secure

上面是一个包含所有参数的Cookie值，表示cookie的名称为name，在2017年1月22日07:10:24失效，对于www.wrox.com和.wrox.com的任何子域名（如p2p.wrox.com）都有效，该域下所有页面都有效，只能通过SSL连接才能传输

读写cookie

通过document.cookie设置，使用字符串拼接的方式连接其他信息

1	document.cookie = encodeURLComponent(‘name’) + ‘=’ + encodeURLComponent(‘Jiang’) + ‘; domain=.wrox.com; path=/‘;

通过自带的接口读取扩展性并不好，自己封装读取、写入、删除的方法

const Cookie = {
    get: function (name) {
        const cookieName = encodeURIComponent(name) + ‘=’
        const cookieStart = document.cookie.indexOf(cookieName)  
        let cookieValue = null
        if (cookieStart > -1) {
            let 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) {
        let cookieText = encodeURIComponent(name) + ‘=’ + encodeURIComponent(value)
        if (expires instanceof Date) {
            cookieText += ‘; expirse=’ + expires.toGMTString()
        }
        if (path) {
            cookieText += ‘; path=’ + path
        }
        if (domain) {
            cookieText += ‘; domain=’ + domain
        }
        if (secure) {
            cookieText += ‘; secure’
        }
        
        document.cookie = cookieText
    },
    unset: function (name, path, domain, secure) {
        this.set(name, ‘’, new Date(0), path, domain, secure)
    }
}

补充session和cookie区别

cookie数据存放在客户的浏览器上，session数据放在服务器上。
cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session。
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用COOKIE。
将登陆信息等重要信息存放为SESSION,其他信息如果需要保留，可以放在COOKIE中

webStorage

克服由cookie带来的一些限制，当数据需要被严格控制在客户端上，无须持续地将数据发回服务器

目标：

提供一种在cookie之外存储会话数据的途径
提供一种存储大量可跨会话存在的数据机制

storage类型方法

clear(): 删除所有值
getItem(name): 根据指定的名字name获取相应的值
key(index): 获取index位置处的名字
removeItem(name): 删除由name指定的名值对
setItem(name, value): 为指定的name值设置一个值

sessionStorage对象

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

sessionStorage对象是storage的一个实例，所以使用于上面的那些方法

localStroage对象

用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

localStroage对象也是storage的一个实例，所以使用于上面的那些方法

总结

cookie和webStorage的区别

webStorage用于更大量数据存储
Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生