Article directory
Cookie
1. What are cookies?
- Cookie 是一种在客户端存储数据的小型文本文件。
- Cookie 通常用于存储和返回与用户相关的信息。
2. How cookies work
- 服务器通过 HTTP 响应头将 Cookie 发送给客户端。
- 客户端在后续请求中通过 HTTP 请求头将 Cookie 发送回服务器。
- 服务器根据接收到的 Cookie 来获取用户相关信息或设置新的 Cookie。
3. Cookie properties and functions
- 名称 (Name)：Cookie 的名称。
- 值 (Value)：与 Cookie 相关联的具体内容。
- 过期时间 (Expires)：Cookie 的有效期限。
- 域 (Domain)：可以访问 Cookie 的域名。
- 路径 (Path)：可以访问 Cookie 的路径。
- 安全标识 (Secure)：表示 Cookie 是否只在使用 SSL/TLS 加密协议时传输。
- HTTP-only 标识：表示 Cookie 是否只能通过 HTTP(S) 协议访问，而无法通过 JavaScript 等客户端脚本语言访问。
4. Application scenarios for using cookies
- 用户登录状态：通过存储用户登录信息，实现自动登录或保持登录状态。
- 个性化设置：根据用户喜好设置个性化选项或主题。
- 购物车功能：存储用户选择的商品信息，以便在结账时使用。
- 跨页面数据传递：在不同页面之间传递数据，实现状态的持久化。
Actual applications may involve more details and features.
localStorage
1. What is localStorage
- localStorage 是 Web 浏览器提供的一种在客户端持久存储数据的机制。
- localStorage 允许开发者在用户浏览器中存储和获取数据，供后续访问和使用。
2. Characteristics and limitations of localStorage
- 容量限制：不同浏览器对 localStorage 的容量限制不同，通常在 5MB - 10MB 之间。
- 持久性：localStorage 中存储的数据在关闭浏览器或电脑后仍然存在，可以持久保存。
- 同源策略：localStorage 受到同源策略的限制，只能在相同的域名、协议和端口下进行访问。
- 存储格式：localStorage 只能存储字符串类型的数据，但可以通过 JSON.stringify 和 JSON.parse 方法将对象转换为字符串和反转换。
3. How to use localStorage
- 设置数据：使用 localStorage.setItem 方法来存储数据，将键值对作为参数传入。
- 获取数据：使用 localStorage.getItem 方法来读取数据，传入键名即可获取对应的值。
- 删除数据：使用 localStorage.removeItem 方法根据键名删除特定数据，或使用 localStorage.clear 方法清空所有数据。
4. Usage scenarios and precautions
- 缓存数据：将频繁使用的数据存储在 localStorage 中，提高访问速度。
- 离线应用：利用 localStorage 存储应用的关键数据，使应用在离线状态下仍能正常运行。
- 数据共享：在同一域名下的不同页面之间共享数据，避免重复加载或传递数据。
- 安全性：由于 localStorage 存储的数据在客户端保存，需要注意敏感信息的存储和保护。
In actual use, issues such as browser compatibility and data storage methods also need to be considered.
sessionStorage
1. What is sessionStorage
- sessionStorage 是 Web 浏览器提供的一种在客户端临时存储数据的机制。
- sessionStorage 允许开发者在用户浏览器中存储和获取数据，供同一窗口或标签页的后续访问和使用。
2. Features and limitations of sessionStorage
- 会话级别持久性：sessionStorage 中存储的数据在当前会话期间有效，当用户关闭标签页或浏览器后，数据会被清除。
- 同源策略：sessionStorage 受到同源策略的限制，只能在相同的域名、协议和端口下进行访问。
- 存储格式：sessionStorage 只能存储字符串类型的数据，但可以通过 JSON.stringify 和 JSON.parse 方法将对象转换为字符串和反转换。
3. How to use sessionStorage
- 设置数据：使用 sessionStorage.setItem 方法来存储数据，将键值对作为参数传入。
- 获取数据：使用 sessionStorage.getItem 方法来读取数据，传入键名即可获取对应的值。
- 删除数据：使用 sessionStorage.removeItem 方法根据键名删除特定数据，或使用 sessionStorage.clear 方法清空所有数据。
4. Usage scenarios and precautions
- 表单数据的临时保存：在多个表单页面之间临时存储用户输入的数据，以便用户返回时恢复数据。
- 会话数据共享：在同一窗口或标签页内共享数据，例如在不同页面间传递数据或共享登录状态。
- 敏感数据安全性：由于 sessionStorage 存储的数据在客户端保存，需要注意敏感信息的存储和保护。
In actual use, details such as browser compatibility and data storage methods need to be considered.
Compared
| Cookie | localStorage | sessionStorage | |
|---|---|---|---|
| storage | 4KB | 5MB - 10MB | 5MB - 10MB |
| Storage period | Expiration time can be set | Permanently or manually delete | during current session |
| Same origin policy | Restricted by the same-origin policy | Restricted by the same-origin policy | Restricted by the same-origin policy |
| Whether to send to server | yes | no | no |
| type of data | Can only store strings | Can store data types such as strings, numbers, objects, etc. | Can store data types such as strings, numbers, objects, etc. |
| relative safety | medium | higher | Session level security |
| access permission | All pages under the same domain name can be viewed and modified | All pages under the same domain name can be viewed and modified | Visible and modified within the same window or tab |
| use | Track user sessions, authentication, and more | Persistent data, local cache, etc. | Temporarily save data, restore form data, etc. |
The above table compares the differences between Cookie, localStorage and sessionStorage in some key attributes and uses. The appropriate storage mechanism needs to be selected based on actual needs.