HTML5页面数据存储有JavaScript变量、localStorage、sessionStorage三种方式：变量用于临时会话数据；localStorage持久化存储需JSON序列化；sessionStorage限当前标签页；storage事件可监听跨标签页变更；使用前需校验localStorage可用性。
如果您希望在HTML5页面中通过JavaScript变量或localStorage保存和读取数据，则需要了解两种方式的适用场景与具体操作方法。以下是实现页面数据存储的步骤：
一、使用JavaScript变量临时存储数据
JavaScript变量适用于单次页面会话中的临时数据存储，页面刷新或关闭后数据即丢失。该方式适合处理表单中间状态、动态计算结果等无需持久化的信息。
1、在<script>标签内声明一个全局或局部变量，例如：<strong><font color="green">let userData = { name: '张三', age: 25 };</script>
2、修改变量值时直接赋新值，例如：userData.age = 26;
立即学习“前端免费学习笔记（深入）”；
3、在需要的位置调用变量，例如：console.log(userData.name);
二、使用localStorage持久化存储数据
localStorage是HTML5提供的客户端存储机制，数据以字符串形式保存在浏览器中，除非手动清除，否则不会因页面刷新或关闭而丢失。所有键值对必须为字符串类型，因此需配合JSON.stringify()和JSON.parse()处理对象。
1、将对象存入localStorage，例如：localStorage.setItem('user', JSON.stringify({ name: '李四', city: '北京' }));
2、从localStorage读取并解析数据，例如：const savedUser = JSON.parse(localStorage.getItem('user'));
3、删除指定键的数据，例如：localStorage.removeItem('user');
4、清空全部localStorage数据，例如：localStorage.clear();
三、使用sessionStorage临时会话存储
sessionStorage与localStorage接口一致，但数据仅在当前浏览器标签页生命周期内有效，关闭标签页后自动清除。适合存储仅需在一次会话中使用的敏感或临时数据。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
1、保存数据到sessionStorage，例如：sessionStorage.setItem('tempToken', 'abc123xyz');
2、获取sessionStorage中的数据，例如：const token = sessionStorage.getItem('tempToken');
3、移除特定键值，例如：sessionStorage.removeItem('tempToken');
四、监听storage事件响应跨标签页数据变化
当同一域名下的其他标签页修改localStorage时，可通过window对象的storage事件监听变更，实现多标签页间的数据同步响应。
1、添加storage事件监听器，例如：window.addEventListener('storage', (e) => { console.log('键名：', e.key, '旧值：', e.oldValue, '新值：', e.newValue); });
2、确保监听代码在页面加载完成后执行，例如放在<script>标签底部或DOMContentLoaded事件中。</script>
3、注意该事件**不会**在触发修改的当前标签页中触发，仅在其他同源标签页中生效。
五、设置数据前校验localStorage可用性
部分浏览器在隐私模式或禁用本地存储时可能抛出QuotaExceededError等异常，需提前检测localStorage是否可写，避免脚本中断。
1、尝试写入并捕获异常，例如：try { localStorage.setItem('test', 'test'); localStorage.removeItem('test'); } catch (e) { console.error('localStorage不可用'); }
2、封装一个安全写入函数，例如：function safeSetItem(key, value) { try { localStorage.setItem(key, value); } catch (e) {} }
3、判断是否处于无痕模式的方法之一是检查localStorage.length在初始化后是否始终为0且无异常抛出。
