本文介绍如何使用 localstorage 实现用户界面中 toggle checkbox 状态（开/关）的跨会话持久化存储，确保用户下次访问时自动恢复其上次的选择。
本文介绍如何使用 localstorage 实现用户界面中 toggle checkbox 状态（开/关）的跨会话持久化存储，确保用户下次访问时自动恢复其上次的选择。
要在前端实现 toggle 开关状态的持久化保存，核心在于：页面加载时读取 localStorage 中的值并初始化 checkbox 状态；用户操作时及时将新状态写入 localStorage。你当前的 validate() 方法已正确实现了“写入”逻辑，但缺少关键的“读取并初始化”步骤——这正是导致刷新后状态丢失的根本原因。
✅ 正确实现步骤
1. 页面加载时恢复状态（关键！）
在组件初始化或 DOM 加载完成后（如 Angular 的 ngAfterViewInit、Vue 的 mounted，或原生 JS 的 DOMContentLoaded），从 localStorage 读取值，并设置 checkbox 的 checked 属性：
// TypeScript 示例（适用于 Angular 或纯 JS 环境）
ngAfterViewInit() {
const savedState = localStorage.getItem('togBtn');
const input = document.getElementById('togBtn') as HTMLInputElement;
// 注意：localStorage 存储的是字符串，需安全解析布尔值
if (savedState !== null) {
input.checked = savedState === 'true'; // 推荐用字符串比较，避免 JSON.parse 报错
}
}⚠️ 注意：不要直接使用 JSON.parse(togBtn) —— 若 localStorage 中值为空或非合法 JSON（如 'false' 字符串），会抛出异常。更健壮的方式是显式判断字符串值。
vue-composition-api-best-practicesVue 3 组合式 API 与
更多相关专题
C语言变量命名c语言变量名规则是：1、变量名以英文字母开头；2、变量名中的字母是区分大小写的；3、变量名不能是关键字；4、变量名中不能包含空格、标点符号和类型说明符。php中文网还提供c语言变量的相关下载、相关课程等内容，供大家免费下载使用。
3189
2023.06.20
c语言运算符的优先级顺序c语言运算符的优先级顺序是括号运算符 > 一元运算符 > 算术运算符 > 移位运算符 > 关系运算符 > 位运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。本专题为大家提供c语言运算符相关的各种文章、以及下载和课程。
1260
2023.08.02
c语言数据结构数据结构是指将数据按照一定的方式组织和存储的方法。它是计算机科学中的重要概念，用来描述和解决实际问题中的数据组织和处理问题。数据结构可以分为线性结构和非线性结构。线性结构包括数组、链表、堆栈和队列等，而非线性结构包括树和图等。php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。
1218
2023.08.09
c语言random函数用法c语言random函数用法：1、random.random，随机生成（0,1）之间的浮点数；2、random.randint，随机生成在范围之内的整数，两个参数分别表示上限和下限；3、random.randrange，在指定范围内，按指定基数递增的集合中获得一个随机数；4、random.choice，从序列中随机抽选一个数；5、random.shuffle，随机排序。
1356
2023.09.05
c语言const用法const是关键字，可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍：1、声明常量，const关键字可用于声明常量，常量的值在程序运行期间不可修改，常量可以是基本数据类型，如整数、浮点数、字符等，也可是自定义的数据类型；2、函数参数中的const修饰符，const关键字可用于函数的参数中，表示该参数在函数内部不可修改等等。
2178
2023.09.20
c语言get函数的用法get函数是一个用于从输入流中获取字符的函数。可以从键盘、文件或其他输入设备中读取字符，并将其存储在指定的变量中。本文介绍了get函数的用法以及一些相关的注意事项。希望这篇文章能够帮助你更好地理解和使用get函数 。
3500
2023.09.20
c数组初始化的方法c语言数组初始化的方法有直接赋值法、不完全初始化法、省略数组长度法和二维数组初始化法。详细介绍：1、直接赋值法，这种方法可以直接将数组的值进行初始化；2、不完全初始化法，。这种方法可以在一定程度上节省内存空间；3、省略数组长度法，这种方法可以让编译器自动计算数组的长度；4、二维数组初始化法等等。
15935
2023.09.22
OpenJDK JVM参数怎么调优Java应用运行缓慢，如何调整JVM参数？本专题介绍OpenJDK JVM性能调优的基本流程，涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析，帮助你先定位瓶颈，再通过对照测试验证效果，避免直接套用参数而影响应用稳定性。
0
2026.10.16
更多热门下载
更多相关下载
更多精品课程
相关推荐/热门推荐/最新课程更多最新文章
