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接口一致，但数据仅在当前浏览器标签页生命周期内有效，关闭标签页后自动清除。适合存储仅需在一次会话中使用的敏感或临时数据。
启明星企业抽奖程序 系统采用ASP.NET4.0 无需数据库。在企业抽奖时，请勿关闭或者刷新页面。因为系统目前没有提供保存数据功能。例如在抽二等奖和一等奖之间，可能有时间间隔。那么，此时，你可以按F11取消全屏，然后最小化页面，再单击右下角喇叭，设置无声。1.启明星抽奖程序配置说明使用说明：在lottery/lottery文件夹下，有3个文本文件。company.txt存放公司名称，award.t
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且无异常抛出。
