1. 前言

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

2. 表格 简单对比

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

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用法其实都一样

参考资料

初心

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

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

共勉