参考文章：
https://www.cnblogs.com/bellow/p/4962374.html
一、 cookie
1. 介绍：
cookie是浏览器提供的一种机制，它将document对象的cookie属性提供给
JavaScript。以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名（硬盘中有许多cookie文件），当浏览器再次访问这个域名时，便可使用该域名对应的cookie文件。因此，cookie可跨越一个域名下的多个网页，但不能跨越多个域名使用（可通过设置主域名来访问不同主机名对应的网页）
2. 优点：
① cookie机制将信息存储于用户硬盘，因此可以作为全局变量。
② 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，
③ 跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。利用cookie系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。（后台完成）
④ 定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。
⑤ 使用cookie记录购物车浏览记录。
3. 缺点
① cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
② cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
③ cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
④ cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。
4. cookie的相关操作
① 设置cookie：document.cookie="..;..;"(每个cookie都是一个名/值对)
注意：
① 在cookie 的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值中，而且使用此 种方案还可以避免中文乱码的出现。eg:document.cookie="str="+escape("I love ajax");相当于document.cookie="str=I%20love%20ajax";
② 当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。
② 设置cookie的终止日期document.cookie = "id=12;expires='日期' "
注意：
① 在日期处只能填写Tue Oct 01 2019 12:00:00 GMT+0800类似的格式,不能将日期转换成具体年月日…
② 若想要删除某一个cookie，可重新设置其终止日期
③ 设置cookie的path
① 默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。
② 若想要cookie在整个网站下可用（可理解成在一个工程下），可以设置：path:/,/代表根目录下！
③cookie的path只能具体到某一个文件夹，不能具体到某一个网页。
④cookie的path在设置后便不能再修改
⑤ 假设现在在test文件夹下的一个页面添加了一个cookie，且将其path设置为/test1，此时打开页面，path值自动变为/test
④ 设置cookie的domain
若想要cookie在同一个域下的不同主机都可使用(必须只能为同一个域下的！！！)，例如：www.google.com和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：document.cookie="name=value;domain=.google.com"
注意：
domain只能在初始时设置，设置后不能修改
⑤ 获取cookie：document.cookie
只能获取到全部的
cookie，不能只获取一个。若要找到想要的cookie，必须自己判断
二、 storage：localStorage & sessionStorage
区别：localStorage是本地缓存，缓存到硬盘，关闭浏览器缓存不会消失。sessionStorage：浏览器端缓存。关闭浏览器时缓存会消失
1. localStorage
①添加缓存： localStorage.setItem(key,value)
添加缓存，
key是唯一的，当缓存中已有key时，再次写该语句，只会将key对应的value值修改，而不会创建一个新的键值对
②根据key得到对应缓存值： localStorage.getItem(key)
由于缓存中
key是唯一的，故可通过key来获取到该key对应的value
③ 获取缓存中键值对的个数：localStorage.length;
④ 通过索引获取对应的键值对中的key：localStorage.key(index)
返回index对应的键值对中的key
⑤清除所有缓存： localStorage.clear()
⑥ 清除key对应的缓存键值对：localStorage.removeItem(key)
2. sessionStorage
| 方法 | 描述 |
|---|---|
sessionStorage.setItem(key,value) |
key唯一 |
sessionStorage.getItem(key) |
返回key对应的value |
sessionStorage.length |
缓存中的键值对个数 |
sessionStorage.key(index) |
返回index对应的key |
sessionStorage.clear() |
清除所有缓存 |
sessionStorage.removeItem(key) |
清除key对应的键值对 |
