1. 前言

1. 前端存储cookie,storage,vuex是常用的手段
2. 也需要从不同的角度来理解

---

2. 表格 简单对比

下面是使用表格形式展示Cookie、sessionStorage、localStorage和Vuex的区别：

	存储位置	生命周期	存储容量	跨域访问	用途
Cookie	存储在浏览器	可设置过期时间	通常几 KB	受同源策略限制	存储用户登录状态、跟踪等
sessionStorage	存储在浏览器	当前会话期间有效	通常几 MB	受同源策略限制	临时会话数据
localStorage	存储在浏览器	永久有效	通常几 MB	受同源策略限制	长期保存的数据
Vuex	存储在内存	随应用存在	受内存限制	仅在Vue.js应用内	状态管理和数据共享

---

3. cookie

3.1 基本概念

1. Cookie是一种用于在浏览器和服务器之间传递数据的机制。
   2.它是由服务器发送给浏览器的一个小型文本文件，浏览器会将它存储在用户的计算机上，并在后续请求中将该Cookie发送回服务器。
2. 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 输入验证和过滤：

1. 对用户输入进行验证和过滤，确保只接受合法和预期的数据。可以使用输入验证库或自定义过滤函数进行数据过滤，防止恶意脚本注入。
   2.对于Cookie的值，可以限制只接受特定格式或特定字符集的数据，例如只允许字母、数字和部分特殊字符等。

---

5.2 输出编码：

1. 在将Cookie的值输出到HTML页面时，使用合适的编码方式对特殊字符进行转义，防止被解析为HTML标签或JavaScript代码。
   常用的编码方式包括HTML实体编码（如将 < 转义为 <）和JavaScript编码（如将 " 转义为 "）。

---

5.3 HttpOnly标志：

1. 使用HttpOnly标志来设置Cookie，将其限制为只能通过HTTP请求发送，禁止通过JavaScript访问。
2. 这样可以防止恶意脚本通过document.cookie等方式获取Cookie的值，提高Cookie的安全性。

---

5.4 SameSite属性：

1. 设置Cookie的SameSite属性来限制Cookie的发送，确保Cookie只能在同一站点下发送，防止跨站点请求伪造（CSRF）攻击。
2. 可以将SameSite属性设置为"Lax"（部分限制）或"Strict"（严格限制）。

---

5.5 SSL/TLS加密：

1. 使用SSL/TLS加密协议来保护Cookie的传输，确保在网络传输过程中的数据安全。
2. 通过使用HTTPS协议，加密Cookie的传输，防止被中间人窃取或篡改。

---

6. storage

1. sessionStorage和localStorage是HTML5提供的两种客户端存储数据的机制，它们都是基于键值对的方式来存储数据，并且在浏览器中永久保存。
2. 它们之间的区别主要在于数据的生命周期和作用域

---

6.1 sessionStorage:

1. 生命周期：仅在当前会话期间有效。会话结束时（关闭浏览器或标签页），sessionStorage中的数据会被清除。
2. 作用域：每个页面的sessionStorage是独立的，即在同一站点下的不同页面之间无法共享sessionStorage中的数据
3. 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:

1. 生命周期：永久有效，除非用户手动删除或网站清除。localStorage中的数据会一直保存在浏览器中。
2. 作用域：每个页面的localStorage是独立的，即在同一站点下的不同页面之间无法共享localStorage中的数据。

// 存储数据
localStorage.setItem('key', 'value');
// 这种写法也行
//localStorage.key =  'value';


// 获取数据
const value = localStorage.getItem('key');
// 这种写法也行
//const value = localStorage.key;
// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

1. localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）
2. localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

• sessionStorage 和localStorage 相关 Api用法其实都一样

---

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉