0

0

什么是本地存储_如何用localStorage保存数据【教程】

狼影

狼影

发布时间:2026-01-20 23:24:08

|

460人浏览过

|

来源于php中文网

原创

localStorage只存字符串,存对象须JSON.stringify(),取值需JSON.parse()并try/catch,数字布尔需显式转换,键名用字母数字组合,超限捕获QuotaExceededError,clear()慎用。

什么是本地存储_如何用localstorage保存数据【教程】

localStorage 不是“存个数据就完事”的黑盒,它只认字符串,存对象不序列化就等于存了个空壳——这是你第一次用就可能翻车的地方。

setItem() 怎么存才不会丢数据

localStorage.setItem() 是唯一推荐的写入方式,它明确要求 value 必须是字符串。传对象、数组、nullundefined 都会被强制转成字符串,比如 localStorage.setItem('user', {name: 'Alice'}) 实际存进去的是 "[object Object]",取出来根本没法用。

  • 存对象或数组:必须先用 JSON.stringify(),例如 localStorage.setItem('settings', JSON.stringify({theme: 'dark'}))
  • 存数字/布尔值:别依赖隐式转换false → "false"),显式转更可控,比如 localStorage.setItem('count', String(42))localStorage.setItem('active', 'true')
  • 键名别用特殊字符:空格、斜杠、中文、控制符在某些安卓 WebView 里会静默失败,坚持用 kebab-casecamelCase 字母数字组合
  • 容量超限?捕获 QuotaExceededError,而不是等页面卡死:
    try {
      localStorage.setItem('data', hugeString);
    } catch (e) {
      if (e.name === 'QuotaExceededError') {
        console.warn('localStorage full, fallback to memory cache');
      }
    }

getItem() 取出来为什么不是对象

localStorage.getItem() 永远返回字符串或 null,哪怕你当初存的是 42true。直接拿它做判断或计算,90% 的 bug 都出在这儿。

Android创建和使用数据库详细指南 中文WORD版
Android创建和使用数据库详细指南 中文WORD版

每个应用程序都要使用数据,Android应用程序也不例外,Android使用开源的、与操作系统无关的SQL数据库--SQLite,本文介绍的就是如何为你的Android应用程序创建和操作SQLite数据库。 数据库支持每个应用程序无论大小的生命线,除非你的应用程序只处理简单的数据,那么就需要一个数据库系统存储你的结构化数据,Android使用SQLite数据库,它是一个开源的、支持多操作系统的SQL数据库,在许多领域广泛使用,如Mozilla FireFox就是使用SQLite来存储配置数据的,iPhon

下载
  • 别写 if (localStorage.getItem('isLogin') === true) —— 它永远是 false,因为取出来是字符串 "true"
  • 安全读对象:先判空,再 JSON.parse(),并加 try/catch
    const data = localStorage.getItem('config');
    let config = {};
    try {
      config = data ? JSON.parse(data) : {};
    } catch (e) {
      console.warn('localStorage config parse failed, using default');
    }
  • 读数字别忘了类型转换:const count = Number(localStorage.getItem('count')) || 0
  • 判断是否存在,别用 if (localStorage.getItem('x')) —— 因为 "0""false" 都是真值;正确写法是 localStorage.getItem('x') !== null

removeItem() 和 clear() 到底该删谁

localStorage.removeItem() 删除单个键,安全;localStorage.clear() 是核弹级操作,会把同源下所有页面共用的数据一锅端,生产环境误用等于清空用户全部偏好设置。

  • 想删一组相关数据(比如购物车项)?遍历判断前缀,别全清:
    Object.keys(localStorage).forEach(key => {
      if (key.startsWith('cart_')) {
        localStorage.removeItem(key);
      }
    });
  • removeItem() 对不存在的键静默失败,不报错也不提示,适合“尽力删”场景
  • clear() 不可逆,且影响范围远超当前页面——比如你在一个管理后台调用它,可能顺手清掉用户在另一个标签页里刚填一半的表单草稿

真正难的不是 API 会不会用,而是记住:localStorage 没有类型、没有过期、没有通知、没有事务。它像一张纸条,你写了什么,它就原样贴在浏览器里,直到你撕掉,或者用户自己清空——而这张纸条上,永远只能写字符串。

相关专题

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

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

413

2023.08.07

json是什么
json是什么

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

533

2023.08.23

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

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

310

2023.10.13

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

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

75

2025.09.10

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

318

2023.08.02

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

232

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

437

2024.03.01

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

754

2023.08.22

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

19

2026.01.20

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.4万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号