JavaScript中的cookie和web storage

Web Storage

实际上由两部分组成：sessionStorage与localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

cookie

Cookie指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据，由卢·蒙特利于1993年3月发明。Cookie基于 Internet的各种服务系统应运而生，是由 Web 服务器保存在用户浏览器上的小文本文件，它可以包含有关用户的信息，是用户获取、交流、传递信息的主要场所之一，无论何时用户链接到服务器，Web 站点都可以访问 Cookie 信息。

cookie的属性字段

通过上面的实例可以知道，给cookie赋值时是不会覆盖cookie的原有的值，当等号前的属性名相同时，才会将原来相同属性名的值覆盖为后来设置的值。注意，cookie的两个字段之间是通过一个分号和空格分隔，而不是只有一个分号
当要给cookie设置非自定义的属性字段时，需要通过字符串追加的方式
例如：

let expireDate = new Date();
document.cookie += ";expires=" + expireDate.toString();

注意： ";expires="中的分号必须有，如果字段前不加分号则会认为这是一个自定义字段

domain

非顶级域名，如二级域名或者三级域名，设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身，不能设置其他二级域名的cookie，否则cookie无法生成。
顶级域名只能设置domain为顶级域名，不能设置为二级域名或者三级域名，否则cookie无法生成。
二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面或者到这个cookie的值了。
顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。
总的来说就是，上级域名不能访问下级域名的cookie，下级域名可以读取自身及上级域名的cookie，同级域名的cookie不共享，即同级域名之间不能互相访问对方的cookie，只能访问自身的cookie。

path

path字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。
expires/Max-Age
expires/Max-Age 字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置此字段时，默认值是Session，即当浏览器关闭(注意：不是浏览器标签页，而是整个浏览器) 后，此cookie失效。
let expireDate = new Date("2019-5-26T09:00:00");
document.cookie += ";expires=" + expireDate.toString();
若要删除某条cookie则设置此条cookie的expires为当前时间之前的时间的即可
let expireDate = new Date("1970-01-01T00:00:00");
document.cookie += ";expires=" + expireDate.toString();

size

Size字段 此cookie大小。
httpOnly
若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie，设置为true可以减少受到Xss***的风险
secure
secure 字段 设置是否只能通过https来传递此条cookie
localstorage/sessionstorage
webstorage并不是要替代cookie，而是为了弥补随着web的发展，cookie在存储限制（存储容量最多为4k），安全性（在http协议中明文传输）存在的缺点而提出的
两者的API是相同的

function  intro

setItem(key, value) 以键值对的形式保存一条数据
getItem(key)    根据键来获得值
removeItem(key) 根据键来删除一条数据
key(index)  根据索引获得键的名称
clear() 删除全部数据
两者都有length属性

sessionStorage.setItem("name", "Jack");
sessionStorage.setItem("phone", "18856894523");
console.log(sessionStorage.getItem('name')); // Jack
console.log(sessionStorage.key(0)); // name
console.log(sessionStorage.length); // 2
sessionStorage.removeItem('phone');
console.log(sessionStorage.length); // 1
sessionStorage.clear();    
console.log(sessionStorage.length); // 0

两者的比较

localStorage和sessionStorage都是用来存储客户端临时信息的对象。均只能存储字符串类型的对象，虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现。
localStorage生命周期是永久，除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，sessionStorage存储的数据就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。
相同浏览器的不同页面（页面属于相同域名和端口）间可以共享相同的localStorage
不同页面或标签页间无法共享sessionStorage的信息。注意，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且属于同源页面，那么他们之间是可以共享sessionStorage的。
使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

cookie 与 webstorage的区别

存储限制
每个domain中只能存储最多20条cookie，cookie数据不能超过4K
webStorage也有存储大小的限制，但是比cookie大得多，可以达到5M或更大
数据的有效期
sessionStorage：仅在当前的浏览器窗口关闭有效；
localStorage：始终有效，除非用户手动删除
cookie：cookie过期时间之前一直有效，即使窗口和浏览器关闭

作用域

sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage：同源窗口共享
cookie：同源窗口共享