javascript如何存储数据_本地存储有哪些方式-js教程-PHP中文网

javascript如何存储数据_本地存储有哪些方式

夜晨

发布： 2025-12-20 20:47:02

原创

388人浏览过

JavaScript本地存储主要有localStorage、sessionStorage、cookies、IndexedDB和Cache API；localStorage长期同源存储且容量5–10MB，sessionStorage仅限单标签会话，cookies自动随请求发送且体积≤4KB，IndexedDB支持大量结构化异步存储。

javascript如何存储数据_本地存储有哪些方式

JavaScript 本地存储主要有三种常用方式：localStorage、sessionStorage 和 cookies（配合 document.cookie 使用），此外还有更现代的 IndexedDB 和实验性的 Cache API（主要用于资源缓存）。它们适用场景不同，核心区别在于生命周期、容量限制和作用域。

localStorage：长期保存，同源共享

数据永久保存（除非手动清除），关闭浏览器也不丢失，仅限同源（协议+域名+端口）访问。

只支持字符串，存对象需先 JSON.stringify()，读取时用 JSON.parse()
容量通常为 5–10MB（因浏览器而异）
操作简单：localStorage.setItem('key', 'value')、localStorage.getItem('key')、localStorage.removeItem('key')

sessionStorage：页面会话级临时存储

数据仅在当前浏览器标签页有效，关闭该标签即清空，同样要求同源，其他行为与 localStorage 基本一致。

适合暂存表单草稿、导航状态等单次会话数据
不跨标签页共享，即使同域名新开一个 tab 也是独立空间
API 完全相同，只是把 localStorage 换成 sessionStorage

Cookie：带服务端交互的小型文本存储

每次 HTTP 请求都会自动携带（可配置 HttpOnly 或 Secure），体积小（单个通常 ≤4KB），需注意安全性与性能影响。

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

查看详情

立即学习“Java免费学习笔记（深入）”；

通过 document.cookie = 'name=value; expires=...; path=/; secure; SameSite=Lax' 设置
读取需手动解析字符串（没有原生 get 方法），建议用工具函数或库处理
常用于身份凭证（如 session ID）、用户偏好、跟踪标识等

IndexedDB：浏览器内置的异步数据库

适合存储大量结构化数据（如离线邮件、缓存图片、日志），支持索引、事务、增删改查，但 API 较复杂。

容量远大于 localStorage（可达数百 MB，取决于磁盘空间）
所有操作异步，避免阻塞主线程
需要打开数据库 → 创建/获取 objectStore → 执行请求（add/get/put/delete）

基本上就这些。日常开发中，优先选 localStorage 或 sessionStorage；要持久化登录态且需服务端验证，用 Cookie；存大量离线数据或需查询能力，上 IndexedDB。不复杂但容易忽略的是：别往 localStorage 存敏感信息，它完全暴露在前端；也别依赖它做关键业务逻辑，毕竟用户可以随时清空。

以上就是javascript如何存储数据_本地存储有哪些方式的详细内容，更多请关注php中文网其它相关文章！