1.Cookie
1.1 什么是cookie?
由于HTTP是一种无状态的协议，服务器单从网络连接上是无法知道客户身份的。这时候服务器就需要给客户端颁发一个cookie，用来确认用户的身份。
简单的说，cookie就是客户端保存用户信息的一种机制，用来记录用户的一些信息。
原理:web服务器通过在http响应消息头增加Set-Cookie响应头字段将Cookie信息发送给浏览器，浏览器则通过在http请求消息中增加Cookie请求头字段将Cookie回传给web服务器。
这里强调一点，是Cookie的不可跨域名性
很多网站都会使用Cookie，不同浏览器采用不同的方式保存Cookie，而且每个网站的Cookie只能够被对应的网站使用。意思就是说当浏览器访问baidu时，只会带baidu的Cookie，而不会带其他网站的Cookie，这就是Cookie的不可跨域名性 。
Cookie在客户端是由浏览器来管理的。浏览器可以保证各个网站只能操作各个网站的Cookie，从而保证用户的隐私安全。
1.2 cookie的构成
服务器端向客户端发送Cookie是通过HTTP响应报文实现的，在Set-Cookie中设置需要向客户端发送的cookie，cookie格式如下：
Set-Cookie: "name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2019 11:29:42 GMT;HttpOnly;secure"
一个Cookie通常包含以下几个部分:
- 名称: Cookie的名字
- 值: Cookie的内容
- 域: Cookie所属的域名
- 路径: Cookie在哪个路径下生效
- 过期时间/有效期: Cookie的生命周期
- 安全标志: 是否只在HTTPS连接中传输
1.3 Cookie的特点
大小限制: 通常不超过4KB
数量限制: 每个域名下的Cookie数量有限(具体取决于浏览器)
会随HTTP请求发送到服务器
可以设置过期时间
可以被客户端和服务器端访问
1.4 JS对Cookie的所有操作总结
a. 读取Cookie:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
b. 设置Cookie:
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
c. 删除Cookie:
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=-99999999;';
}
d. 检查Cookie是否存在:
function checkCookie(name) {
return document.cookie.split(';').some(c => {
return c.trim().startsWith(name + '=');
});
}
1.5 注意事项
- 不要在Cookie中存储敏感信息
- 使用HttpOnly标志可以防止客户端脚本访问Cookie
- 使用Secure标志可以确保Cookie只通过HTTPS发送
- 考虑使用SameSite属性来防止CSRF攻击
Session
2.1 什么是Session?
Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。
客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了
2.2 Session的工作步骤
因为HTTP协议是无状态的，Session不能依据HTTP连接来判断是否为同一个用户。于是服务器向用户的浏览器发送了一个名为JESSIONID的Cookie，它的值是Session的id值。这个id可以让Session依据Cookie来识别是否是同一个用户。
简单来说：Session 之所以可以识别不同的用户，依靠的就是Cookie，所以说session是基于Cookie的
该Cookie是服务器自动颁发给浏览器的，不用我们手工创建的。该Cookie的maxAge值默认是-1，也就是说仅当前浏览器使用，不将该Cookie存在硬盘中，并且各浏览器窗口间不共享，关闭浏览器就会失效。
工作步骤：
将客户端称为 client，服务端称为 server
- 产生 sessionID：session 是基于 cookie 的一种方案，所以，首先要产生 cookie。client 第一次访问server，server 生成一个随机数，命名为 sessionID，并将其放在响应头里，以 cookie 的形式返回给 client，client 以处理其他 cookie 的方式处理这段 cookie。大概是这样：cookie：sessionID=135165432165
- 保存 sessionID： server 将要保存的数据保存在相对应的 sessionID 之下，再将 sessionID 保存到服务器端的特定的保存 session 的内存中（如 一个叫 session 的哈希表）
- 使用 session： client 再次访问 server，会带上首次访问时获得的 值为 sessionID的cookie，server 读取 cookie 中的 sessionID，根据 sessionID 到保存 session的内存寻找与 sessionID 匹配的数据，若寻找成功就将数据返回给 client。
2.3 session的有效期
Session保存在服务器端。为了获得更高的存取速度，服务器一般把Session放在内存里。每个用户都会有一个独立的Session。如果Session内容过于复杂，当大量客户访问服务器时可能会导致内存溢出。因此，Session里的信息应该尽量精简。
Session生成后，只要用户继续访问，服务器就会更新Session的最后访问时间，并维护该Session。用户每访问服务器一次，无论是否读写Session，服务器都认为该用户的Session“活跃（active）”了一次。
由于会有越来越多的用户访问服务器，因此Session也会越来越多。为防止内存溢出，服务器会把长时间内没有活跃的Session从内存删除。这个时间就是Session的超时时间。如果超过了超时时间没访问过服务器，Session就自动失效了。
2.4 cookie与session的区别
- Cookie数据存放在客户端，Session数据放在服务器端
- Cookie的安全性一般，他人可通过分析存放在本地的Cookie并进行Cookie欺骗。在安全性第一的前提下，选择Session更优。重要交互信息比如权限等就要放在Session中，一般的信息记录放Cookie中
- 单个Cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个Cookie，而Session原则上没有限制
- Session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用Cookie。
- Session 的运行依赖Session ID，而 Session ID 是存在 Cookie 中的，也就是说，如果浏览器禁用了 Cookie，Session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 Session ID，也就是地址重写）
3. localStorage
3.1 什么是localStorage?
localStorage 是 Web Storage API 的一部分,它提供了一种在浏览器中存储键值对数据的方法。与 sessionStorage 不同,存储在 localStorage 中的数据没有过期时间,并且在浏览器关闭后仍然存在。
3.2 localStorage使用方法
localStorage和sessionStorage使用时使用相同的API：
// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
const value = localStorage.getItem('key');
// 删除特定数据
localStorage.removeItem('key');
// 清除所有数据
localStorage.clear();
localStorage 是一个保存于客户端的哈希表，可以用来保存本地的一些数据。并且不会因为刷新而释放，所以，可以使用 localStorage 来实现变量的持久化存储
3.3 localStorage的特点
- 容量大: 通常为5MB
- 持久存储: 数据不会因为关闭浏览器而消失，理论上永久有效，除非用户清理缓存
- 同源策略: 只有相同域名的页面才能互相读取 localStorage，同源策略与 cookie 一致
- 仅在客户端使用: 不会与服务器通信
- localStorage 与 HTTP 没有任何关系，所以在HTTP请求时不会带上 localStorage 的值
- 常用来记录一些不敏感的信息
3.4 测试
打开一个页面，打开console控制台，
- 输入localStorage.setItem(‘z’,‘j’)，在当前窗口的当前页面，能够通过localStorage.getItem(‘z’)拿到值 j 的。
- 强制刷新页面，也能通过localStorage.getItem(‘z’)拿到值 j 的。
- 在当前窗口输入百度的网址，等页面加载完成后，此时访问localStorage.getItem(‘z’)，访问不到。再输入原地址，等待加载完成，再通过localStorage.getItem(‘z’)仍然能够拿到值j。
- 打开一个新的窗口，输入原地址，仍然可以通过localStorage.getItem(‘z’)拿到值 j
- 关闭浏览器，再次输入原地址，仍然可以通过localStorage.getItem(‘z’)拿到值 j
测试同一ip，但是不同端口，是否能访问到
- 访问http://localhost:9091/，打开控制台 ，使用localStorage.setItem(‘kk’,‘jj’)；
- 再打开另一个窗口，访问http://localhost:8085/，使用localStorage.getItem(‘kk’)，发现返回的是null，说明同一ip，不同端口，其localStorage值不能共享。
- 但是此时如果，我访问http://localhost:9091/a/b，此时，再使用localStorage.getItem(‘kk’)，能够访问得到jj，说明同ip，同端口，不同路径是可以共享 的。
- 得到的结论：如果不手动清理掉localStorage中的数据，那么通过localStorage存储的数据，将会一直存在。
4. sessionStorage
sessionStorage 的所有性质基本上与 localStorage 一致，唯一的不同区别在于：
sessionStorage 的有效期是页面会话持续，如果页面会话（session）结束（关闭窗口或标签页），sessionStorage 就会消失。而localStorage 则会一直存在。
4.1 测试
1.一个浏览器打开2个窗口，这2个窗口，是同一个地址的2个页面（A页面和B页面），在A页面中设置sessionStorage.setItem(‘KA’,‘KB’)，在A窗口不关闭的情况下，它是能够通过sessionStorage.getItem(‘KA’)得到KB的，但是在B窗口通过sessionStorage.getItem(‘KA’)得到的是null。
2.打开一个地址的页面，然后使用sessionStorage.setItem(‘A’,‘B’)。然后，再ctrl + F5强制刷新页面，发现，当前页面仍然能够使用sessionStorage.getItem(‘A’)获取到B；与vuex的区别，vuex的数据保存在运行内存当中，当刷新页面时，vuex的数据会丢失掉
3.打开一个地址的页面，然后等页面加载完成后，使用sessionStorage.setItem(‘A’,‘B’)，然后在当前窗口的地址栏输入百度的网址，再打开console控制台，此时访问sessionStorage.getItem(‘A’)，返回的是null。此时，在原窗口，输入原地址，在控制台继续访问sessionStorage.getItem(‘A’)，发现此时能够继续访问的到B
4.测试同一ip，但是不同端口，是否能访问到
- 访问http://localhost:9091/，打开控制台，使用sessionStorage.setItem(‘kk’,‘jj’)；在该窗口地址栏，访问http://localhost:8085/，使用sessionStorage.getItem(‘kk’)，发现返回的是null，说明同一ip，不同端口，其sessionStorage值不能共享。
- 但是此时如果，我在该窗口地址栏，输入http://localhost:9091/a/b，此时，再使用sessionStorage.getItem(‘kk’)，能够访问得到jj，说明同ip，同端口，不同路径是可以共享的。
得到的结论：只要当前的页面不关闭，不管里面怎么跳地址（刷新或地址跳来跳去），都能通过sessionStorage访问到当前源设置的数据。
4.2 localStorage与sessionStorage的区别
- localStorage生命周期是永久的，除非被清除，否则永久保存，而sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除
- 相同点可以参考localStorage的特点。这里再强调一下，这两个存储方式用来存放数据大小一般为5MB，并且仅在客户端（即浏览器）中保存，不参与和服务器的通信。
627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
