1. 前言
- 前端存储cookie,storage,vuex是常用的手段
- 也需要从不同的角度来理解
2. 表格 简单对比
下面是使用表格形式展示Cookie、sessionStorage、localStorage和Vuex的区别：
| 存储位置 | 生命周期 | 存储容量 | 跨域访问 | 用途 | |
| Cookie | 存储在浏览器 | 可设置过期时间 | 通常几 KB | 受同源策略限制 | 存储用户登录状态、跟踪等 |
| sessionStorage | 存储在浏览器 | 当前会话期间有效 | 通常几 MB | 受同源策略限制 | 临时会话数据 |
| localStorage | 存储在浏览器 | 永久有效 | 通常几 MB | 受同源策略限制 | 长期保存的数据 |
| Vuex | 存储在内存 | 随应用存在 | 受内存限制 | 仅在Vue.js应用内 | 状态管理和数据共享 |
3. cookie
3.1 基本概念
Cookie是一种用于在浏览器和服务器之间传递数据的机制。
2.它是由服务器发送给浏览器的一个小型文本文件，浏览器会将它存储在用户的计算机上，并在后续请求中将该Cookie发送回服务器。- Cookie通常用于存储用户的身份认证、会话信息、个性化设置等数据。
3.2 cookie 操作-增加
document.cookie = 'username=John Doe; expires=Thu, 1 Jul 2024 12:00:00 UTC; path=/';
通过使用document.cookie属性来设置Cookie的值。
Cookie的格式是name=value，可以使用分号;分隔多个Cookie
3.3 cookie 操作-删除
document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; // 删除名为"username"的Cookie
3.4 cookie 操作-修改
document.cookie = 'username=Jane Smith; expires=Thu, 1 Jul 2024 12:00:00 UTC; path=/'; // 修改名为"username"的Cookie的值
3.5 cookie 操作-查询
const cookies = document.cookie; // 获取当前文档中的所有Cookie console.log(cookies);
- cookie操作确实比较麻烦 可以借助第三方库来操作
4. cookie 作用
- 保存用户登录状态
例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。
- 跟踪用户行为
例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便
- 定制页面
如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格
5. Cookie如何防范XSS攻击
- XSS（跨站脚本攻击）是指
攻击者在返回的HTML中嵌入javascript脚本
5.1 输入验证和过滤：
- 对用户输入进行
验证和过滤，确保只接受合法和预期的数据。可以使用输入验证库或自定义过滤函数进行数据过滤，防止恶意脚本注入。
2.对于Cookie的值，可以限制只接受特定格式或特定字符集的数据，例如只允许字母、数字和部分特殊字符等。
5.2 输出编码：
- 在将Cookie的值输出到HTML页面时，使用
合适的编码方式对特殊字符进行转义，防止被解析为HTML标签或JavaScript代码。
常用的编码方式包括HTML实体编码（如将 < 转义为 <）和JavaScript编码（如将 " 转义为 "）。
5.3 HttpOnly标志：
- 使用
HttpOnly标志来设置Cookie，将其限制为只能通过HTTP请求发送，禁止通过JavaScript访问。- 这样可以
防止恶意脚本通过document.cookie等方式获取Cookie的值，提高Cookie的安全性。
5.4 SameSite属性：
- 设置
Cookie的SameSite属性来限制Cookie的发送，确保Cookie只能在同一站点下发送，防止跨站点请求伪造（CSRF）攻击。- 可以将SameSite属性设置为
"Lax"（部分限制）或"Strict"（严格限制）。
5.5 SSL/TLS加密：
- 使用SSL/TLS加密协议来保护Cookie的传输，确保在网络传输过程中的数据安全。
- 通过使用HTTPS协议，加密Cookie的传输，防止被中间人窃取或篡改。
6. storage
- sessionStorage和localStorage是HTML5提供的两种客户端存储数据的机制，它们都是基于键值对的方式来存储数据，并且在浏览器中永久保存。
- 它们之间的区别主要在于数据的生命周期和作用域
6.1 sessionStorage:
- 生命周期：仅在当前会话期间有效。会话结束时（关闭浏览器或标签页），sessionStorage中的数据会被清除。
- 作用域：每个页面的sessionStorage是独立的，即在同一站点下的不同页面之间无法共享sessionStorage中的数据
- demo
// 存储数据 sessionStorage.setItem('key', 'value'); // 这种写法也行 //sessionStorage.key = 'value'; // 获取数据 const value = sessionStorage.getItem('key'); // 这种写法也行 //const value = sessionStorage.key; // 删除数据 sessionStorage.removeItem('key'); // 清空所有数据 sessionStorage.clear();
- 仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持
6.2 localStorage:
- 生命周期：永久有效，除非用户手动删除或网站清除。localStorage中的数据会一直保存在浏览器中。
- 作用域：每个页面的localStorage是独立的，即在同一站点下的不同页面之间无法共享localStorage中的数据。
// 存储数据 localStorage.setItem('key', 'value'); // 这种写法也行 //localStorage.key = 'value'; // 获取数据 const value = localStorage.getItem('key'); // 这种写法也行 //const value = localStorage.key; // 删除数据 localStorage.removeItem('key'); // 清空所有数据 localStorage.clear();
- localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）
- localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）
- sessionStorage 和localStorage 相关 Api用法其实都一样
