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,并且仅在客户端(即浏览器)中保存,不参与和服务器的通信。