网页记忆功能可通过五种本地存储机制实现：一、localStorage 持久化键值对；二、sessionStorage 限于当前会话；三、JSON 序列化存取复杂数据；四、cookies 支持跨页面与服务端共享；五、IndexedDB 处理大规模结构化数据。
如果您希望网页在用户关闭后仍能保留之前输入的数据或设置，则需要借助 浏览器 提供的本地存储机制。以下是实现 HTML 页面记忆功能的多种应用方案：
一、使用 localStorage 保存和读取数据
localStorage 是一种持久化的 键值对 存储方式，数据在浏览器中长期保留，除非被主动清除或用户手动删除。
1、在 JavaScript 中调用 window.localStorage.setItem(key, value) 方法，将字符串形式的数据存入指定键名下。
2、通过 window.localStorage.getItem(key) 获取已保存的字符串值。
3、在页面加载时执行读取操作，并将值填充到对应表单元素中，例如：document.getElementById("username").value = localStorage.getItem("username") || ""。
4、监听表单输入事件（如 input 或change），实时调用 setItem 更新存储内容。
二、使用sessionStorage 实现会话级记忆
sessionStorage 与 localStorage 类似，但其生命周期仅限于当前浏览器标签页会话，关闭标签页后数据自动清除，适用于临时性记忆需求。
1、使用 window.sessionStorage.setItem(key, value) 写入数据。
2、使用 window.sessionStorage.getItem(key) 读取数据。
3、在页面初始化阶段检查是否存在对应键值，若存在则恢复表单状态。
4、可在用户切换页面或刷新时保持当前填写进度，避免重复输入。
三、结合 JSON 序列化存储复杂结构
当需保存对象、数组等非字符串类型数据时，必须先将其转换为 JSON 字符串，再存入 localStorage 或 sessionStorage。
1、使用 JSON.stringify(obj) 将对象转为字符串后存入存储空间。
2、读取时使用 JSON.parse(str) 还原为原始数据结构。
3、对可能抛出异常的 JSON.parse 操作添加 try-catch 包裹，防止解析失败导致脚本中断。
4、示例：保存用户偏好设置对象 {theme: "dark", fontSize: 14}，可统一以"userSettings" 为键名进行管理。
四、利用cookie s 实现跨页面与服务端共享记忆
cookies 是较早期的客户端存储方式，支持设置过期时间、作用域 及 HTTP-only 等属性，适合需与服务端协同的记忆场景。
1、通过 document.cookie = "key=value; expires=Thu, 01 Jan 2030 00:00:00 GMT; path=/" 设置 cookie。
2、读取时需手动解析 document.cookie 字符串，提取目标键值对。
3、可编写辅助函数封装设置与获取逻辑，提升复用性与可维护性。
4、注意 cookie 大小限制（通常单个域名不超过 4KB），不适用于大量数据存储。
五、采用 IndexedDB 处理大规模结构化数据
IndexedDB 是一种低级 API，支持事务、索引和大量结构化数据存储，适用于需离线运行且数据量较大的 Web 应用。
1、调用 window.indexedDB.open("dbName", version) 打开或创建数据库。
2、在 onupgradeneeded 事件中定义对象仓库（object store）及索引。
3、使用 transaction.objectStore("storeName").put(data) 写入记录。
4、通过 get() 或getAll()方法检索已存储的数据，并绑定至 UI 组件。
