javascript本地存储是什么_localStorage怎么用

浅辰酱_2506

浅辰酱_2506

2026-01-11

735人浏览

原创

localStorage是浏览器持久化本地存储API,数据跨会话、跨标签页共享且不随浏览器关闭丢失;sessionStorage仅限当前标签页会话,关闭即清空;二者均只支持字符串存储,存对象需JSON.stringify/parse,且受同源限制、容量限制(5–10MB)及XSS安全风险约束。

javascript本地存储是什么_localstorage怎么用

localStorage 是什么,和 sessionStorage 有什么区别

localStorage 是浏览器提供的本地存储 API,用于在用户设备上持久保存键值对数据。只要不手动清除或用户主动删除站点数据,localStorage 中的数据就一直存在,即使关闭标签页、重启浏览器甚至重启电脑也不会丢失。

它和 sessionStorage 最关键的区别在于生命周期:sessionStorage 只在当前会话(即单个标签页)有效,页面关闭后自动清空;而 localStorage 是跨会话、跨标签页共享的——同一源(协议 + 域名 + 端口)下所有标签页都能读写同一份数据。

注意:两者都只能存字符串,任何非字符串值(如对象、数组、布尔值)都会被自动调用 toString() 转换,导致数据失真,比如 localStorage.setItem('count', 42) 实际存的是字符串 "42",不是数字。

怎么安全地存取对象和复杂数据

直接用 localStorage.setItem() 存对象会变成 [object Object],必须手动序列化和反序列化:

  • 存数据前用 JSON.stringify() 转成字符串
  • 取数据后用 JSON.parse() 还原,但要加 try...catch 防止解析失败(比如用户手动改了 localStorage 内容)
  • 避免直接操作 localStorage 原始接口,封装一层更可靠
function setItem(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (e) {
    console.warn(`localStorage set failed for ${key}:`, e);
  }
}

function getItem(key) {
  const raw = localStorage.getItem(key);
  if (!raw) return null;
  try {
    return JSON.parse(raw);
  } catch (e) {
    console.warn(`localStorage parse failed for ${key}:`, e);
    return null;
  }
}

// 使用示例
setItem('user', { name: 'Alice', age: 30 });
const user = getItem('user'); // { name: 'Alice', age: 30 }

localStorage 有哪些常见报错和限制

最常遇到的是 QuotaExceededError,说明存储超限(通常 5–10MB,取决于浏览器),尤其在存大量日志或未压缩的 JSON 时容易触发。

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

其他典型问题包括:

  • SecurityError:在无源环境(如直接双击打开 file:// HTML 文件)或禁用第三方 Cookie 的隐私模式下,localStorage 可能被完全禁用
  • 同源限制严格:不同子域名(app.example.com vs api.example.com)互不可见,哪怕只差一个子域
  • 没有过期机制:不能设 TTL,需要自己在数据里加时间戳并手动清理
  • 同步阻塞:所有操作都是同步的,大数据量读写可能卡住主线程(虽不常见,但在低配设备或频繁调用时要注意)

什么时候不该用 localStorage

它不是万能缓存,也不该当数据库用。以下场景建议绕开:

  • 存敏感信息(如 token、密码、身份证号)——localStorage 可被同源任意 JS 脚本读取,XSS 攻击下极易泄露
  • 需要服务端同步的状态(如购物车)——客户端存了,服务端不知道,状态容易不一致
  • 高频更新的小字段(如计数器)——每次都要 JSON.parse → 修改 → JSON.stringify,开销比必要大
  • 需要监听变化的场景——localStorage 本身不触发事件,得靠 storage 事件监听,且只在**其他同源窗口**修改时才触发,当前窗口改完不会通知自己

真正需要持久化又带权限控制的数据,优先走后端接口;临时 UI 状态(如折叠菜单、暗色模式开关)才是 localStorage 的舒适区。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2215

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3522

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1176

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

4079

7

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.20

3528

5

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

2023.06.30

12379

10

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.23

1246

5

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.02.23

844

5

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

2025.08.19

1946

14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习