localStorage 存储结构设计:从平铺键值到嵌套对象

夜雪酱_5086

夜雪酱_5086

2026-07-21

417人浏览

原创

localstorage仅支持字符串键值,所谓嵌套实为json序列化;设计应依数据用途、读写频率与维护成本抉择:平铺适合独立固定配置,单层对象适合关联配置组,避免过度嵌套以防解析失败与体积膨胀,数组类数据宜封装为独立键。

localstorage 存储结构设计:从平铺键值到嵌套对象

localStorage 本身只支持字符串键和字符串值,所谓“嵌套对象”其实是把 JavaScript 对象序列化成 JSON 字符串再存进去。设计是否平铺、是否嵌套,关键看数据用途、读写频率和维护成本,而不是技术能否实现。

平铺式结构适合简单配置项

当配置项彼此独立、数量固定、增删不频繁时,用扁平键名最直接。比如快捷键设置:

  • save → "Ctrl+S"
  • undo → "Ctrl+Z"
  • fullscreen → "F11"

好处是读取快(不用解析整个对象)、更新轻量(改一个键不影响其他)、调试直观(DevTools 里一眼看清每个值)。

单层对象结构适合关联性强的配置组

像 K 线图的 MA 均线配置,每条均线都有启用状态、颜色、线宽等字段,且周期(5、10、20)天然构成分类维度。这时用一个对象整体存储更合理:

  • 键名统一为 ma5ma10ma20
  • 值为对应配置对象:{"enabled":true,"color":"#2196F3","lineWidth":2}
  • 整个结构 {"ma5":{...},"ma10":{...},"ma20":{...}} 一次性存入,用 JSON.stringify()JSON.parse() 处理

避免把每条均线拆成 ma5_enabledma5_color 等多个平铺键——既难管理,又增加读写次数。

ARTi.PiCS
ARTi.PiCS

ARTi.PiCS是一款用于生成 AI 头像和风格化个人照片的在线工具。

下载

嵌套过深会带来实际问题

localStorage 不支持原生嵌套,所有“嵌套”都靠 JSON 字符串承载。但过度嵌套会放大风险:

  • 单次读取必须完整解析整段 JSON,哪怕只改一个子字段
  • 容错变差:某一层缺失或格式错误,整个解析失败
  • 体积膨胀:冗余字段、深层路径、重复 key 名都会推高字符串长度

例如,把用户偏好存成 {"profile":{"settings":{"theme":"dark","lang":"zh"}}} 就不如 {"theme":"dark","lang":"zh"} 直接——除非你真有多个 profile 隔离场景。

数组类数据建议封装为独立键

如果要存一组同类对象(如历史操作记录、自定义指标列表),不要强行塞进一个大对象里用数字下标命名(如 history_0history_1)。推荐:

  • 用单一键存整个数组:history[{"id":"01","action":"zoom","time":1717023456},{"id":"02","action":"pan","time":1717023489}]
  • 读取后用 JSON.parse() 得到数组,增删改查用标准数组方法
  • 写回前重新 JSON.stringify(),覆盖原键

这样逻辑清晰,也避免因手动拼键名导致索引错乱或遗漏。

相关文章

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

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

下载

相关标签:

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

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2023

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4323

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5430

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

4878

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

683

5

Vibeknow在线使用入口合集
Vibeknow在线使用入口合集

本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程,涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作,并整理了免费版水印规则与手机端浏览器访问指南,助你快速将知识内容视频化。

2026.09.21

0

20

NumPy随机数文件读写与dtype数据类型
NumPy随机数文件读写与dtype数据类型

本专题整理 NumPy 随机数、文件读写与 dtype 数据类型相关教程,覆盖 Generator/random、随机数种子、正态分布采样、npy/npz/CSV/TXT 保存读取、loadtxt/savetxt、memmap、大文件处理、astype 类型转换、结构化 dtype、整数溢出和精度丢失等场景。

2026.09.21

0

24

NumPy矩阵运算与线性代数计算
NumPy矩阵运算与线性代数计算

本专题整理 NumPy 矩阵运算与线性代数计算相关教程,覆盖矩阵乘法、dot 与 @ 运算符、逆矩阵、行列式、特征值与特征向量、SVD、线性方程组、欧氏距离、矩阵分解和大规模矩阵性能优化等内容,帮助读者掌握 np.linalg 与矩阵计算实战。

2026.09.21

0

20

NumPy广播机制数学运算与统计分析
NumPy广播机制数学运算与统计分析

本专题整理 NumPy 广播机制、数组数学运算与统计分析相关教程,覆盖广播规则、维度对齐、矩阵与数组加减除法、向量化计算、均值方差、分位数、中位数、直方图和 unique 频次统计等场景,帮助读者掌握 ndarray 高效计算与统计处理方法。

2026.09.21

0

17

热门下载

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

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.6万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.1万人学习