cookie
解决问题
http 请求是无状态的,即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不知道当前请求是哪个用户。
cookie 第一次登录后服务器返回一些数据(cookie)给浏览器,然后浏览器保存在本地,当该用户发送第二次请求的时候,就会自动的把上次请求存储的 cookie 数据携带给服务器,服务器通过浏览器携带的数据就能判断当前用户是哪个。
作用
1、保存用户登录状态。
例如将用户 id 存储于一个 cookie 内,这样当用户下次访问该页面时就不需要重新登录了,还可以设置过期时间,如一个月、三个月、一年等。
2、跟踪用户行为。
例如系统能够记住上一次访问的记录,当下次再打开该页面时,它就会自动显示上次用户所选的记录。
cookie 如何防范 XSS 攻击
在 HTTP 头部配上 set-cookie
set-cookie.httponly —— 可以防止 XSS,禁止 javascript 脚本来访问 cookie
set-cookie.secure —— 告诉浏览器仅在请求为 https 的 时候发送 cookie
cookie 属性
- name
- value
- domain(域名)
- path(路径)
- expires/Max-Age (超时时间)
- size(大小)
- http(httponly 属性)
- secure (是否通过 https 传递)
缺点
1、cookie 需要在客户端和服务器端之间来回传送,浪费不必要的资源。
2、cookie 的存储大小有限制,对于每个域,一般只能设置20个 cookie,每个 cookie 大小不能超过4KB。
3、cookie 的安全性低,因为保存在客户端中,其中包含的任何数据都可以被他人访问。
sessionStorage
概念
sessionStorage 对象是存储特定于某个会话的数据,数据只保存到浏览器关闭,但是数据可以跨越页面刷新而存在。
使用
// 使用方法存储数据
sessionStorage.setItem("ifClick", "true");
// 使用属性存储数据
sessionStorage.ifClick = "true";
特点
1、只在本地存储:数据不会跟随 HTTP 请求一起发送到服务器,只会在本地生效,并在关闭标签页后清除数据。
2、存储方式:key、value的方式
3、存储上限限制:一般为5MB,但不同的浏览器存储上限不一样。
localStorage
概念
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
使用
localStorage.setItem("ifClick","true");
特点
1、同源策略限制:若想在不同页面之间对同一个 localStorage 进行操作,这些页面必须是同源的。
2、只在本地存储:数据不会跟随HTTP请求一起发送到服务器,只会在本地生效,且长期有效直到手动删除。
3、存储方式:key、value的方式
4、存储上限限制:一般为5MB。
5、本质:对字符串的读取,如果存储内容多的话会占用内存空间,会导致页面变卡。
三种存储方式的区别
1、交互
cookie在浏览器和服务器间来回传递;而 sessionStorage 和 localStorage 不参与和服务器的交互,仅在本地保存。
2、存储大小
cookie 存储的数据不能超过4k,因为每次http请求都会携带 cookie,所以只适合保存很小的数据;sessionStorage 和 localStorage 一般为5M或更大。
3、数据有效期
sessionStorage 仅在当前浏览器窗口关闭或刷新前有效;而 localStorage 保存数据始终有效,即使窗口或浏览器关闭;cookie 在开发人员设置的有效期时间之前一直有效,即使窗口或浏览器关闭。
4、共享
sessionStorage 在不同的浏览器窗口中不能共享,即使是同源页面;cookie 和 localStorage 在所有同源窗口中都是共享的。
参考文章:https://www.cnblogs.com/Yellow-ice/p/10507472.html、https://blog.csdn.net/weixin_30596023/article/details/95141645