Cookie、localStorage、sessionStorage 的区别

1. 数据生命周期

• Cookie：可以设置过期时间（Expires 或 Max - Age），若不设置，默认在浏览器关闭时过期。
• localStorage：除非手动删除，否则数据永远不会过期。
• sessionStorage：仅在当前会话期间有效，页面关闭或浏览器关闭时数据自动清除。

2. 数据存储大小

• Cookie：一般每个域名下的 Cookie 数据大小限制在 4KB 左右。
• localStorage 和 sessionStorage：存储容量一般为 5MB 左右。

3. 数据传输

• Cookie：数据会随 HTTP 请求一起发送到服务器，增加了请求的数据量，可能会影响性能。
• localStorage 和 sessionStorage：数据仅存储在客户端，不会随 HTTP 请求发送到服务器。

4. 访问权限

• Cookie：可以通过 document.cookie 来读写，并且服务器端也可以设置和修改 Cookie。
• localStorage 和 sessionStorage：通过 window.localStorage 和 window.sessionStorage 来访问，仅在客户端操作。

5. 数据共享

• Cookie：在同一域名下的所有页面都可以访问 Cookie，并且可以在不同浏览器窗口或标签页之间共享。
• localStorage：在同一域名下的所有页面（包括不同窗口或标签页）都可以共享 localStorage 数据。
• sessionStorage：不同窗口（或标签页）之间的 sessionStorage 数据是相互独立的，即使是同一页面的不同窗口实例也无法共享。

示例代码

Cookie

// 设置 Cookie
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// 获取 Cookie
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

const username = getCookie('username');
console.log(username);

localStorage

// 设置数据
localStorage.setItem('username', 'John');

// 获取数据
const username = localStorage.getItem('username');
console.log(username);

// 删除数据
localStorage.removeItem('username');

sessionStorage

// 设置数据
sessionStorage.setItem('username', 'John');

// 获取数据
const username = sessionStorage.getItem('username');
console.log(username);

// 删除数据
sessionStorage.removeItem('username');