三、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>
