浏览器存储
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
:适合存储仅在当前会话期间有效的数据,如购物车数据或临时表单数据。
date: 2023-10-07 13:15:28
tags: [前端技术]
title: 浏览器存储浏览器存储
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
:适合存储仅在当前会话期间有效的数据,如购物车数据或临时表单数据。