如何用 JSON.parse 安全地还原存储在本地的对象与数组

大磊酱_3306

大磊酱_3306

2026-04-12

370人浏览

原创

安全还原本地存储JSON需先校验再解析:用safeParse函数检查字符串类型、非空,再try/catch解析,失败返回null;存储时必须JSON.stringify,读取后提供默认值兜底。

如何用 json.parse 安全地还原存储在本地的对象与数组

直接用 JSON.parse 解析本地存储(如 localStorage)中的字符串,看似简单,但一不留神就会报错甚至导致页面崩溃。关键在于:本地存储的值可能是 null、空字符串、非 JSON 格式字符串,或被篡改过的无效内容。安全还原的核心是「先校验,再解析」,而不是盲目调用。

检查值是否存在且为合法 JSON 字符串

从 localStorage 读取的值始终是字符串类型,但可能为 "null"、"",或根本不是 JSON(比如被手动编辑过)。不能只判断是否为真值。

  • 先用 typeof value === 'string' 确保是字符串
  • 再用 value.trim() !== '' 排除空白字符串
  • 最后尝试解析,并用 try...catch 捕获语法错误

封装一个健壮的 parse 工具函数

把校验和解析逻辑收拢成一个可复用函数,避免每次重复写 try/catch:

function safeParse(str) {
  if (typeof str !== 'string' || !str.trim()) return null;
  try {
    const parsed = JSON.parse(str);
    // 可选:进一步校验是否为对象或数组(按需)
    if (parsed === null || (typeof parsed !== 'object')) return null;
    return parsed;
  } catch (e) {
    return null;
  }
}

使用示例:
const data = safeParse(localStorage.getItem('userPrefs'));
返回值一定是解析后的对象/数组,或 null —— 不会抛错,也不返回意外类型。

存储时也需配合规范操作

安全解析的前提是存储本身可靠。务必用 JSON.stringify 存入,且避免存入 undefined、函数、Date、RegExp 等无法序列化的值:

jm-jsjkxyjs02-zlm-405
jm-jsjkxyjs02-zlm-405

使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。

下载
  • 存前过滤:例如 localStorage.setItem('cart', JSON.stringify(cartItems || []))
  • 避免直接存 localStorage.setItem('config', someObj)(未 stringify)
  • 若需存日期等特殊类型,先转成字符串(如 date.toISOString()),读取时再恢复

对 null 或解析失败做明确兜底

不要让解析失败导致后续逻辑中断。根据业务场景提供默认值:

  • 数组默认值:const list = safeParse(localStorage.getItem('tasks')) || []
  • 对象默认值:const config = safeParse(localStorage.getItem('settings')) || { theme: 'light' }
  • 需要区分“无数据”和“解析失败”时,可用 undefined 表示前者,null 表示后者

不复杂但容易忽略:JSON 安全还原不是靠一次 parse,而是靠前置判断 + 异常捕获 + 合理默认。写好 safeParse,后面所有本地存储读取都稳了。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

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

下载

相关标签:

js json

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

相关专题

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

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

2023.08.07

2255

5

json是什么
json是什么

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

2023.08.23

3602

1

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

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

2023.10.13

1196

3

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

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

2025.09.10

4159

7

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

3240

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

3053

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1161

6

热门下载

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

精品课程

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

共101课时 | 21.3万人学习

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

共39课时 | 4.9万人学习