HTML5页面数据存储有JavaScript变量、localStorage、sessionStorage三种方式:变量用于临时会话数据;localStorage持久化存储需JSON序列化;sessionStorage限当前标签页;storage事件可监听跨标签页变更;使用前需校验localStorage可用性。

如果您希望在HTML5页面中通过JavaScript变量或localStorage保存和读取数据,则需要了解两种方式的适用场景与具体操作方法。以下是实现页面数据存储的步骤:
一、使用JavaScript变量临时存储数据
JavaScript变量适用于单次页面会话中的临时数据存储,页面刷新或关闭后数据即丢失。该方式适合处理表单中间状态、动态计算结果等无需持久化的信息。
1、在
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、确保监听代码在页面加载完成后执行,例如放在
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且无异常抛出。









