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：适合存储仅在当前会话期间有效的数据，如购物车数据或临时表单数据。