当前位置: 首页 > news >正文

红宝书第二十五讲:客户端存储(Cookie、localStorage、IndexedDB):浏览器里的“记忆盒子”


红宝书第二十五讲:客户端存储(Cookie、localStorage、IndexedDB):浏览器里的“记忆盒子”

资料取自《JavaScript高级程序设计(第5版)》。
查看总目录:红宝书学习大纲


一、Cookie:小容量“便利贴”

特点

  • 存储量小:约4KB(资料1提到)1
  • 自动随请求发送:每次请求都会携带Cookie,如登录Token
  • 手动设置过期时间:否则关闭浏览器失效(资料5中的HTTP头Set-Cookie)[^5]

代码示例(资料5的HTTP响应)[^5]:

// 服务器设置Cookie(HTTP响应头)
HTTP/1.1 200 OK
Set-Cookie: user_token=abc123; Expires=Wed, 21 Oct 2025 07:28:00 GMT

// JavaScript操作Cookie(写入)
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

适用场景:存储会话ID、用户基础标识。


二、localStorage & sessionStorage:文件柜式存储

对比(资料1中的区别)1

类型生命周期共享范围
localStorage永久存储(手动删除才消失)同域名下所有页面
sessionStorage关闭标签页即消失仅当前标签页
适合存储 少量简单数据(如用户偏好设置),容量约 5MB/域名 12。同步操作,直接读写字符串。
核心方法
  • 存数据localStorage.setItem(key, value)
  • 取数据localStorage.getItem(key)
  • 删数据localStorage.removeItem(key)

示例1:(资料3的存储限制)2

// 存储数据(最大约5MB)
localStorage.setItem("theme", "dark");  
// 读取数据
const theme = localStorage.getItem("theme"); // "dark"

// sessionStorage用法相同
sessionStorage.setItem("tempData", "仅保存到标签关闭");
示例2:保存用户主题偏好
// 点击切换深色模式时保存
function toggleDarkMode() {
  const isDark = document.body.classList.toggle('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

// 页面加载时读取
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') document.body.classList.add('dark');

⚠️ 注意事项

  1. 只能存储字符串,对象需用JSON.stringify()转换
  2. 同一域名下共享,不同域名数据隔离 2

二、IndexedDB:浏览器里的“数据库”

适合存储 大量复杂数据(如应用缓存、用户订单记录),支持对象存储、事务和查询。容量可达 GB级 12

特点(资料1中的描述)1

  • 结构化存储:类似SQL,可存复杂对象(如图片)
  • 支持事务:操作更安全(如转账的原子性)
  • 容量大:远超Cookie和Web Storage

操作流程(资料4中的事务与游标)13

核心概念

示例3:

// 1. 打开或创建数据库
const request = indexedDB.open("myDatabase", 1);

// 2. 创建对象仓库(类似表)
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore("users", { keyPath: "id" });
};

// 3. 插入数据
db.transaction("users", "readwrite")
  .objectStore("users")
  .add({ id: 1, name: "Alice", age: 30 });
示例4:使用Dexie.js简化操作
// 初始化数据库(举例)
const db = new Dexie("MyAppDB");
db.version(1).stores({
  users: "++id, name, email", // 自增id,索引name和email
  notes: "id, content, createdAt"
});

// 添加用户
await db.users.add({ name: "小明", email: "xiaoming@example.com" });

// 根据email查询
const user = await db.users.where("email").equals("xiaoming@example.com").first();

优点

  • 异步操作不阻塞页面 3
  • 支持复杂查询和索引(比localStorage快得多)
  • 存储结构灵活(对象、文件等)

三、如何选择?
三种存储方式对比
特性CookielocalStorageIndexedDB
容量~4KB~5MB数百MB,域名隔离,最高GB级 2
数据发送每次请求自动携带不自动发送不自动发送
数据结构字符串字符串结构化对象/二进制
复杂度简单简单高(需要事务管理,推荐用Dexie.js4
适用场景用户标识偏好设置/临时数据(按key查)离线应用/复杂数据(支持索引、排序和范围查询)
选择指南
  1. 小且需自动发送的数据 → Cookie 1
  2. 中长期存储简单数据 → localStorage 2
  3. 大量结构化数据 → IndexedDB 1



四、注意事项
  1. 域名隔离:同一个域名下的存储数据其他域名无法访问 2
  2. 浏览器限制:本地文件(file://)可能无法使用IndexedDB(建议用Chrome测试)4
  3. 清除数据:用户可通过浏览器设置手动清除

目录:总目录
上篇文章:红宝书第二十四讲:详解BOM对象:window、location、history
下篇文章:红宝书第二十六讲:详解Web Workers:专用、共享、Service Worker

脚注


  1. 《JavaScript高级程序设计(第5版)》指出localStorage容量通常为5MB/域名 ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎

  2. 《JavaScript高级程序设计(第5版)》说明IndexedDB按域名隔离且容量更大 ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎

  3. 《JavaScript高级程序设计(第5版)》描述IndexedDB采用异步请求模型 ↩︎ ↩︎

  4. 《JavaScript高级程序设计(第5版)》示例使用Dexie.js简化IndexedDB操作 ↩︎ ↩︎

http://www.dtcms.com/a/108615.html

相关文章:

  • Leetcode 6233 -- DFS序列 | 两遍DFS
  • Vue中JSEncrypt 数据加密和解密处理
  • Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
  • wireshak抓手机包 wifi手机抓包工具
  • linux 时钟
  • 【爬虫】网页抓包工具--Fiddler
  • 【Audio开发二】Android原生音量曲线调整说明
  • LInux基础指令(二)
  • 【VS+Qt】vs2022打开 vs2015项目
  • FastAPI中Pydantic异步分布式唯一性校验
  • 机器视觉调试——现场链接相机(解决各种相机链接问题)
  • 自然语言处理(22:(第六章2.)​seq2seq模型的实现​)
  • 图片懒加载、无限滚动加载、监听元素进入视口加载数据。「IntersectionObserver」
  • scala编程语言
  • 服务器数据恢复—Raid6阵列硬盘故障掉线,上层虚拟机数据如何恢复?
  • linux-firewalld防火墙允许端口
  • 【SLAM经典算法详解】Ubuntu 20.04部署LeGO-LOAM:从环境配置到KITTI适配,解决常见编译错误
  • 从零开发美颜SDK:美颜滤镜API的核心技术与实现
  • 多视图几何--立体校正--Fusiello方法
  • CMake学习--如何在CMake中编译静态库、动态库并在主程序中调用
  • rag精细化测试
  • 论坛系统的测试
  • win10 快速搭建 lnmp+swoole 环境 ,部署laravel6 与 swoole框架laravel-s项目1
  • Docker in Docker(Dind)
  • 深入解析 Git Submodule:从基础到高级操作指南
  • 电子电气架构 --- 控制器级架构
  • 基于HTML5的拖拽排序功能实现详解
  • Dify接口api对接,流式接收流式返回(.net)
  • Java迭代器【设计模式之迭代器模式】
  • C++ 中的类型处理与类型别名(二十六)