JavaScript本地存储主要有localStorage、sessionStorage、cookies、IndexedDB和Cache API；localStorage长期同源存储且容量5–10MB，sessionStorage仅限单标签会话，cookies自动随请求发送且体积≤4KB，IndexedDB支持大量结构化异步存储。
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），需注意安全性与性能影响。
立即学习“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如何存储数据_本地存储有哪些方式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544560.html
微信扫一扫 
支付宝扫一扫 
