首先需要知道的是 HTTP是无状态的协议
问：什么是无状态？
答：状态的主体是信息（这些信息由服务器维护的，并与客户端交互的），因为HTTP本身不保存任何用户状态信息，所以认为HTTP是无状态的协议。而无状态是指客户端每一次向服务器发送请求都会被认为是新的请求，每一次的会话都是没有联系的。
所以为了保存状态信息，则有了cookie、session。
| cookie | session |
|---|---|
| 数据存储在客户端 | 数据存储在服务器 |
| 安全性稍差（客户端存储） | 安全性稍好 |
| 可长时间保存 | 有效期短（客户端关闭、session超时都会失效） |
| 存储数据不超过4K | 数据存储量远高于cookie（访问量大会占用过多资源） |
cookie
- cookie是服务器发送到用户浏览器，并保存在本地的一小块数据，大小不超过4k，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。cookie是以键值对存储的(key=value），都必须是字符串类型。
- 如果在浏览器设置了过期时间，则存储数据在内存中。否则数据存储在硬盘中。
创建与获取
// 【创建cookie】
// 默认时间
function setCookieDefaultTime(name, value) {
let exp = new Date();
document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString();
}
// 自定义时间
function setCookie(name, value, time) {
let strsec = getsec(time);
let exp = new Date();
exp.setTime(exp.getTime() + strsec * 1);
document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString();
// Cookie值不能包含分号，逗号或空格，所以要使用JS中的escape()函数进行编码
// 在Cookie值读取时，需要使用unescape()
// 过期时间： 正数-过期时间点 负数-关闭浏览器则过期 0-立即过期
}
function getsec(str) {
let str1 = str.substring(1, str.length) * 1;
let str2 = str.substring(0, 1);
if (str2 == "s") {
return str1 * 1000;
} else if (str2 == "h") {
return str1 * 60 * 60 * 1000;
} else if (str2 == "d") {
return str1 * 24 * 60 * 60 * 1000;
}
}
// 【获取cookie】
function getCookie(name) {
var arr,reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if((arr == document.cookie.match(res))) return unescape(arr[2]);
else return null;
}
// 【删除cookie】
function delCookie(name) {
// let exp = new Date();
// exp.setTime(exp.getTime() -1);
let cval = getCookie(name);
if(cval != null) {
document.cookie = name + '=' + cval + ';expires=0'；
}
}
session
session是基于cookie实现的，session存储在服务器端，sessionId 会被存储到客户端的cookie 中。
session认证流程
- 用户第一次请求服务器时，服务器根据用户提交的信息，创建对应的Session
- 请求返回时将session的唯一标识sessionId返回给浏览器。
- 浏览器接收到服务器返回的sessionID后，将其存入cookie中并记录sessionID属于哪个域名。
- 当用户第二次访问服务器时，请求会自动判断此域名下是否存在Cookie信息。如果存在自动将Cookie信息也发送给服务器，服务器会从Cookie中获取sessionID，再根据sessionID查找对应的session信息。
// 可以看出sessionID是连接cookie和session的一道桥梁。
// 如果浏览器禁用cookie咋办？
// 一般会把sessionID跟在url参数后面 - 重写url(session不一定依靠cookie实现)
webStorage
- 浏览器本地存储的另一种实现方式。
- 包括 localStorage 和 sessionStorage。存储的数据以键值对的形式保存。
- 弥补Cookie本地数据存储的缺陷（存储量小（扩容至5M）、每次请求都携带Cookie加大开销）
localStorage
- storage对象
- 数据持久化保存，即使关闭浏览器数据也不会被清除。
- 相同原（window.location.origin）的其他页面可以通过localStorage访问。
// 【访问】
window.localStorage | localStorage
// 【新增】
localStorage.setItem('name', 'elio');
// 访问指定key数据
localStorage.getItem('name'); // elio
// 【删除指定key】
localStorage.removeItem('name');
// 【清空所有数据项】
localStorage.clear();
sessionStorage
- storage对象
- 数据存储不是持久化的（关闭浏览器 | 关闭浏览器标签tab）
// 【访问】
sessionStoarge | window.sessionStorage
// 【设置】
sessionStorage.setItem('name', 'elio');
// 【获取】
sessionStorage.getItem('name'); // elio
// 【删除】 - 指定key
sessionStorage.removeItem('name');
// 【清空】
sessionStorage.clear();
