浏览器存储

1. 使用

localStorage：

// 存储数据
localStorage.setItem('username', 'John');
// 读取数据
const username = localStorage.getItem('username');
// 删除数据
localStorage.removeItem('username');

cookie：

// 设置一个持久cookie
document.cookie = 'username=John; expires=Thu, 01 Jan 2025 00:00:00 UTC; path=/';
// 读取cookie
const cookies = document.cookie.split('; ');
const usernameCookie = cookies.find(cookie => cookie.startsWith('username='));
const username = usernameCookie ? usernameCookie.split('=')[1] : '';

sessionStorage：

// 存储数据
sessionStorage.setItem('cart', JSON.stringify({ item: 'product', quantity: 2 }));
// 读取数据
const cart = JSON.parse(sessionStorage.getItem('cart'));
// 删除数据
sessionStorage.removeItem('cart');

2. 区别

• 内存大小：

  • localStorage 具有较大的存储容量（一般为5-10MB）。
  • cookie 通常限制每个cookie的大小为4KB。
  • sessionStorage 与localStorage相似，但也会受浏览器限制。

• 生存周期：

  • localStorage 数据永久存储，除非明确删除。
  • cookie 可以设置过期时间，可以是会话结束时失效（会话cookie）或在指定的日期时间后失效（持久cookie）。
  • sessionStorage 数据在当前会话期间有效，当会话结束时，数据被删除。

• 存储内容限制：

  • localStorage 和 sessionStorage 通常可以存储字符串类型的数据，但可以通过JSON.stringify和JSON.parse来处理复杂的对象。
  • cookie 只能存储文本数据，需要进行编码和解码以存储和读取非文本数据。

• 作用域：

  • localStorage 和 sessionStorage 同一域名下的不同页面可以共享相同的数据。
  • cookie 可以根据域名和路径设置不同的cookie，并且可以在不同的子域名之间共享，但有一些安全限制。

3. 使用场景

• localStorage：适合长期存储用户数据，如用户首选项、本地缓存等。
• cookie：适合存储短期数据，如会话标识、跟踪用户行为、身份验证令牌等。
• sessionStorage：适合存储仅在当前会话期间有效的数据，如购物车数据或临时表单数据。

---

title: 浏览器存储
date: 2023-10-07 13:15:28
tags: [前端技术]

浏览器存储

1. 使用

localStorage：

// 存储数据
localStorage.setItem('username', 'John');
// 读取数据
const username = localStorage.getItem('username');
// 删除数据
localStorage.removeItem('username');

cookie：

// 设置一个持久cookie
document.cookie = 'username=John; expires=Thu, 01 Jan 2025 00:00:00 UTC; path=/';
// 读取cookie
const cookies = document.cookie.split('; ');
const usernameCookie = cookies.find(cookie => cookie.startsWith('username='));
const username = usernameCookie ? usernameCookie.split('=')[1] : '';

sessionStorage：

// 存储数据
sessionStorage.setItem('cart', JSON.stringify({ item: 'product', quantity: 2 }));
// 读取数据
const cart = JSON.parse(sessionStorage.getItem('cart'));
// 删除数据
sessionStorage.removeItem('cart');

2. 区别

• 内存大小：

  • localStorage 具有较大的存储容量（一般为5-10MB）。
  • cookie 通常限制每个cookie的大小为4KB。
  • sessionStorage 与localStorage相似，但也会受浏览器限制。

• 生存周期：

  • localStorage 数据永久存储，除非明确删除。
  • cookie 可以设置过期时间，可以是会话结束时失效（会话cookie）或在指定的日期时间后失效（持久cookie）。
  • sessionStorage 数据在当前会话期间有效，当会话结束时，数据被删除。

• 存储内容限制：

  • localStorage 和 sessionStorage 通常可以存储字符串类型的数据，但可以通过JSON.stringify和JSON.parse来处理复杂的对象。
  • cookie 只能存储文本数据，需要进行编码和解码以存储和读取非文本数据。

• 作用域：

  • localStorage 和 sessionStorage 同一域名下的不同页面可以共享相同的数据。
  • cookie 可以根据域名和路径设置不同的cookie，并且可以在不同的子域名之间共享，但有一些安全限制。

3. 使用场景

• localStorage：适合长期存储用户数据，如用户首选项、本地缓存等。
• cookie：适合存储短期数据，如会话标识、跟踪用户行为、身份验证令牌等。
• sessionStorage：适合存储仅在当前会话期间有效的数据，如购物车数据或临时表单数据。