@[toc]
cookie、本地存储、会话存储三者均可以存储数据，存储的时效性有区别
一、cookie
1、是什么
所谓“
cookie”数据是指某些网站为了辨别用户身份，储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。2、cookie的构成
cookie作为用户登录时的一种状态信息，Cookie是保存在客户端的纯文本文件。比如txt文件。所谓的客户端就是我们自己的本地电脑。当我们使用自己的电脑通过浏览器进行访问网页的时候，服务器就会生成一个证书并返回给我的浏览器并写入我们的本地电脑。这个证书就是cookie。一般来说cookie都是服务器端写入客户端的纯文本文件。
原理:web服务器通过在http响应消息头增加Set-Cookie响应头字段将Cookie信息发送给浏览器，浏览器则通过在http请求消息中增加Cookie请求头字段将Cookie回传给web服务器。
名称 | Value
-------- | -----
名称 name |一个唯一确定cookie的名称
值value | 存储在cookie中的字符串
域domain:cookie | cookie对于哪个域是有效的
路径 path | 指定域中的指定路径
失效时间 expires | cookie何时应该被删除的时间戳
max-age | 与expires作用相同，用来告诉浏览器此cookie多久过期（单位是秒），而不是一个固定的时间点。正常情况下，max-age的优先级高于expires。
HttpOnly | 告知浏览器不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见。但在http请求仍然会携带这个cookie。注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
安全标志secure | 指定后，cookie只有在使用SSL连接时才发送到服务器（设置secure标准）
3、cookie 的工作原理
话不多说。先上一张图帮助大家理解cookie 。以登录gitHub仓库为例
原理如下：
问：当我们把浏览器种的cookie信息复制到另一个浏览器中保存进行访问，是不是也可以不用登录直接访问，那这个时候就需要用到cookie劫持
4、cookie的限制
绑定在特定域名下，无法跨越
浏览器对cookie数量的限制规定不同（例如FF规定每个域名最多50个，二Safari和chrome没有数量限制）
所有cookie的累加长度限制为4KB，超长会被忽略
名称 | Value
-------- | -----
JS中的cookie |document.cookie
获取 | 返回当前页面可用的所有cookie的字符串，由分号和空格隔开的一系列名值对（name1 = value1; name2 = value2;）
添加 | cookie的值必须写成key = value的形式，且等号两边不能有空格写入时必须对分号，逗号和空格进行转义（encodeURLComponent()方法）一次只能写入一个cookie，并且写入不是覆盖，而是添加
- 会话cookie是指在不设定它的生命周期 expires 时的状态，前面说了，浏览器的开启到关闭就是一次会话，当关闭浏览器时，会话cookie就会跟随浏览器而销毁。当关闭一个页面时，不影响会话cookie的销毁。
5、cookie的属性
（除了cookie本身的内容，还有部分可选属性可以被写入，必须都以分号开头）
| 名称 | Value |
|---|---|
| value | 必需项，用于指定cookie的值 |
| expires | 指定cookie过期时间，也指cookie的周期 |
| domain | 指定cookie所在域名（只有访问的域名匹配domain属性，cookie才会发送到服务器） |
| path属性 | 指定路径，必须是绝对路径 |
| secure | 指定cookie只能在加密协议https下发送到服务器 |
| httpOnly | 设置该cookie不能被JS读取 |
二、localStorage（本地存储）
本地存储，在HTML5中，加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是20M大小，这个在不同的浏览器中localStorage会有所不同。它只能存储字符串格式的数据，所以最好在每次存储时把数据转换成
json格式，取出的时候再转换回来。数据没有过期时间。
- 生命周期永久有效，除非手动删除，否则关闭页面也会存在
- 可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
| 名称 | Value |
|---|---|
| 语法： | myStorage = localStorage；返回一个Storage对象 |
| 添加： | localStorage.setltem('key','value'); |
| 获取： | localStorage.getItem('key'); 如果key不存在则返回null |
| 移除： | localStorage.removeItem('key'); 删除名称为“key”的信息，这个key所对应的value也会全部被删除 |
| 清空： | localStorage.clear(); 不接收参数，清空存储对象里的所有数据 |
例：标准的json对象{“name”:“john”}
JSON.stringify();// 将json格式的数据（JavaScript 对象）转换成JSON格式的字符串
例：
var data = {
name:"john"};
data = JSON.stringify(data);
localStorage.setItem("data1",data);
JSON.parse(); //将JSON格式的字符串转换成JSON对象进行处理
localStorage.setItem("name","john"); //设置name为john
localStorage.setItem("name","john1"); //覆盖之前的值，现在name所对应的值是john1
注：
- 各浏览器支持的localStorage容量上限不同；
- localStorage.getItem('key'); 如果key不存在则返回null，而不是 undefined
三、sessionStorage（会话存储）
1、是什么
- 客户端请求服务端，服务端会为这次请求开辟一块内存空间，这个对象便是
Session对象，存储结构为ConcurrentHashMap。Session弥补了 HTTP 无状态特性，服务器可以利用Session存储客户端在同一个会话期间的一些操作记录。 - 服务器第一次接收到请求时，开辟了一块
Session空间（创建了Session对象），同时生成一个sessionId，并通过响应头的Set-Cookie：JSESSIONID=XXXXXXX命令，向客户端发送要求设置Cookie的响应； 客户端收到响应后，在本机客户端设置了一个JSESSIONID=XXXXXXX的Cookie信息，该Cookie的过期时间为浏览器会话结束；
- 接下来客户端每次向同一个网站发送请求时，请求头都会带上该
Cookie信息（包含sessionId）， 然后，服务器通过读取请求头中的Cookie信息，获取名称为JSESSIONID的值，得到此次请求的sessionId。
- 会话，代表服务器与浏览器的一次会话过程，这个过程是连续的，也可以时断时续。
cookie中存放着一个sessionID，请求时会发送这个ID，Session依据Cookie来识别是否是同一个用户；Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。session因为请求（request对象）而产生；session的创建与使用总是在服务端，浏览器从来都没有得到过session对象；session是一个容器，数据存储在用户浏览器中，可以存放会话过程中的任何对象；session是一种http存储机制，目的是为武装的http提供持久机制。- 设置、读取方便，甚至页面刷新不丢失数据
- 容量较大，
sessionStroage约 5M，localStorage约 20 M - 只能存储字符串，可以将对象 JSON.stringify() 编码后存储
- 生命周期为关闭浏览器窗口，并且在 同一个窗口（页面）下数据是可以共享的，数据以键值对的形式存储使用
2、使用
- 存储数据
sessionStorage.setItem(key,value) - 获取数据
sessionStorage.getItem(key) - 删除数据
sessionStorage.removeItem(key) - 删除所有数据数据
sessionStorage.clear()
四、Token
- 一个Token就是一些信息的集合；
- 在Token中包含足够多的信息，以便在后续请求中减少查询数据库的几率；
- 服务端需要对cookie和HTTP Authrorization Header进行Token信息的检查；
- 基于上一点，你可以用一套token认证代码来面对浏览器类客户端和非浏览器类客户端；
- 因为token是被签名的，所以我们可以认为一个可以解码认证通过的token是由我们系统发放的，其中带的信息是合法有效的；
五、案例：记住用户名
思路：
- 把数据存起来，用到本地存储
- 关闭页面，也可以显示用户名，所以用 localStorage
- 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
- 当复选框发生改变的时候 change 事件
<body>
<input type="text" id="username">
<input type="checkbox" id="remember">
记住用户名
<script>
var username = document.querySelector('#username');
var username = document.querySelector('#remember');
if (localStroage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change',function(){
if (this.checked) {
localStorage.setItem('username',username.value)
}else{
localStorage.removeItem('username');
}
})
</script>
</body>
