浏览器中数据的存储方式

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