cookie、webStorage

1. cookie

1.1 cookie是什么

cookie是当我们浏览某网站的时候，由web服务器存储在我们机器硬盘上的一个小的文本文件。其中记录了我们的用户名、密码、浏览的网页、停留的时间等等信息。如果我们再次来到这个网站时，web服务器会先看看有没有它上次留下来的cookie，如果有，会读取cookie中的内容，来判断使用者，比如可以让我们不用输入ID、密码就直接登录等。

当客户端要发送http请求时，浏览器会先检查下是否有对应的cookie，如果有，则自动地添加在request header中的cookie字段。注意，每一次的http请求，如果有cookie，浏览器都会自动带上cookie发送给服务端。

1.2 cookie的属性

（1）Expires\Max Age

设置cookie在什么时间内有效。Expires就是失效日期，它必须是GMT格式的时间（可以通过 new Date().toGMTString() 或者 new Date().toUTCString() 来获得）。对于失效的cookie浏览器会清空。如果没有设置该选项，这样的cookie就称为会话cookie。它存在于内存中，当会话结束，也就是浏览器关闭时，cookie消失。

补充：Expires 是 http/1.0 协议中的选项，在 http/1.1 协议中 Expires 已经由 Max Age 选项代替。Expires的值是一个时间点（cookie失效时刻= Expires），而Max age的值是一个以秒为单位时间段（cookie失效时刻= 创建时刻+ Max age）。

（2）Domain、Path

Domain 是域名，Path 是路径，两者加起来就构成了 URL ，Domain 和 Path 一起来限制 cookie 能被哪些 URL 访问。即请求的URL是 Domain 或其子域、且 URL 的路径是 Path 或子路径，则都可以访问该 cookie。

补充：发生跨域 xhr 请求时，即使请求 URL 的域名和路径都满足 cookie 的 Domain 和 Path ，默认情况下 cookie 也不会自动被添加到请求头部中。

（3）Size

cookie 的大小

（4）Secure

设置 cookie 只在确保安全的请求中才会发送。当请求是 HTTPS 或者其他安全协议时，包含Secure 选项的 cookie 才能被发送至服务器。

补充：如果想在客户端即网页中通过 js 去设置Secure类型的 cookie，必须保证网页是https协议的。在http协议的网页中是无法设置secure类型cookie的。

（5）httponly

这个选项用来设置cookie是否能通过 js 去访问。默认情况下，cookie不会带httpOnly选项(即为空)，所以默认情况下，客户端是可以通过js代码去访问（包括读取、修改、删除等）这个cookie的。当cookie带httpOnly选项时，客户端则无法通过js代码去访问（包括读取、修改、删除等）这个cookie。

补充：只要是httponly类型的,在控制台通过document.cookie是获取不到的，也不能进行修改。

1.3 cookie 的设置、读取、删除方法

（1）服务端设置 cookie ：客户端第一次向服务端请求时，在相应的请求头中就有 set-cookie 字段，用来标识哪个用户。服务端可以设置 cookie 的所有选项。

（2）客户端设置 cookie ：没有特定的方法，需要自己封装。document.cookie可以获得所有 cookie ，也可以通过 document.cookie="name=Dobby"简单设置，一次只能设置一个。

简单设置cookie：

function setCookie ( name, value, iDay ) {

     let oDate = new Date();

    oDate.setDate ( oDate.getDate() + iDay );

    document.cookie = name + "=" + value + ";expires=" + oDate;

} 

读取cookie：

funcion getCookie ( name ){

    let arr = document.cookie.spile ( ';' );

    for( let i = 0; i < arr.length; i ++ ){

        let arr2 = arr[i].split( '=' );

        if( arr2[0] == name ){

            return arr2[1];

        }

        return ' ';

}

删除cookie：

function removeCookie( name ){

    setCookie( name, '1', -1 );//第二个value值随便设个值，第三个值设为-1表示： 昨天就过期了，删除。

}

1.4 cookie 和 session 的区别

cookie 是存在客户端浏览器上，session 会话存在服务器上。会话对象用来存储特定用户会话所需的属性及配置信息。当用户请求来自应用程序的 web 页时，如果该用户还没有会话，则服务器将自动创建一个会话对象。当会话过期或者被放弃后，服务器将终止该会话。

当 cookie 失效、session 过期时，就需要重新登录了。

2. 浏览器本地存储

2.1 localStorage、sessionStorage

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

localStorage 是持久化的本地存储，除非是通过js删除，或者清除浏览器缓存，否则数据是永远不会过期的。

2.2 webstorage 与 cookie 的区别

(1) web storages 和 cookie 的作用不同，web storage 是用于本地大容量存储数据( web storage 的存储量大到 5MB);而 cookie 是用于客户端和服务端间的信息传递；

(2) web storage 有 setItem、getItem、removeItem、clear 等方法，cookie 需要我们自己来封装setCookie、getCookie、removeCookie。