IE10 下 localStorage 异常(SCRIPT5007:无法获取未定义或 null 引用的属性 getItem)的解决方法...

本文介绍了在IE10浏览器中使用HTML5的localStorage特性时遇到的问题及解决办法。通过部署到IIS服务器,可以正常启用该功能并实现数据持久化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

localStorage 是 HTML5 新增的特性之一,用以代替之前较老 HTML 版本中的 Cookie 来保存客户端数据。这个新特性的最大特点是允许我们能更多地在客户端保存数据,无需插件每个网站即可存储最大数据量为5M的信息,部分浏览器甚至允许用户自定义存储大小。对于只存储字符串类型数据的应用需求来说,这已经足够大了。

昨天在写 localStorage 的演示程度时,在 IE10 下调试,莫名地碰到了如下错误:

image

这错误报得很蹊跷啊,难道是 IE10 不支持 localStorage?后来想想不可能啊,IE10 的宣传中明确写着完美支持 HTML5 啊。后来在园友 xiaowei0705 博文《HTML5 LocalStorage 本地存储》中看到,原来 IE10 下调试HTML5页面,localStorage 特性需要将页面部署到 IIS 下才能支持,直接点开静态的 HTML 页面是不可以的。

于是小G将文件夹发布到 IIS 中,然后浏览,果然得到了预期的效果,如下图:

image

这里歌曲列表在添加后是保存在 localStorage 变量中的,刷新页面后,之前添加的歌曲列表会自动加载。

这是我在学习中遇到的小问题的总结,希望能对刚刚接触 HTML5 的乡亲们有所帮助。

文件图标 猛击这里下载示例源码

转载于:https://www.cnblogs.com/gb2013/archive/2012/12/31/2840225.html

const { JSDOM } = require('jsdom'); const fs = require('fs'); // 1. 定义环境补全函数 function patchBrowserEnv(window) { // 补全navigator window.navigator = { userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148', // 添加其他必要的属性 language: 'zh-CN', languages: ['zh-CN', 'zh'], platform: 'iPhone', // ... 其他属性 }; // 补全performance window.performance = { now: () => Date.now() - (window.performance.timing.navigationStart || 0), timing: { navigationStart: Date.now() } }; // 防止被检测为自动化环境 window.chrome = undefined; window.__driver_evaluate = undefined; window.__webdriver_evaluate = undefined; // 如果需要固定Math.random,可以取消注释以下代码(但注意,这可能导致签名被识别为异常) // window.Math.random = () => 0.123456789; // 如果需要固定时间,可以取消注释以下代码(同样注意,实际应用中可能不需要固定时间) // const fixedTime = new Date('2023-01-01T00:00:00Z').getTime(); // window.Date = class extends Date { // constructor(...args) { // if (args.length === 0) { // super(fixedTime); // } else { // super(...args); // } // } // now() { // return fixedTime; // } // }; // window.Date.now = () => fixedTime; // 其他需要补全的对象,比如localStorage, sessionStorage等 if (!window.localStorage) { window.localStorage = { getItem: () => null, setItem: () => {}, removeItem: () => {}, clear: () => {}, length: 0 }; } if (!window.sessionStorage) { window.sessionStorage = { getItem: () => null, setItem: () => {}, removeItem: () => {}, clear: () => {}, length: 0 }; } // 补全其他可能需要的对象,如caches(根据引用[1]中的错误,如果H5guard使用了caches,我们需要模拟) if (!window.caches) { window.caches = { open: () => Promise.reject(new Error('Not implemented')), match: () => Promise.reject(new Error('Not implemented')), // 简单模拟,避免报错 }; } } // 2. 获取签名函数 async function getMtgsig() { const dom = new JSDOM(`<!DOCTYPE html>`, { url: 'https://h5.waimai.meituan.com/waimai/mindex/home', runScripts: "dangerously", pretendToBeVisual: true }); const { window } = dom; patchBrowserEnv(window); // ✅ 应用补丁 // 注入H5guard.js const h5guardCode = fs.readFileSync('./H5guard.js', 'utf-8'); const script = window.document.createElement('script'); script.textContent = h5guardCode; window.document.body.appendChild(script); return new Promise((resolve) => { setTimeout(() => { if (window.H5guard?.sign) { const params = { token: "test", shopuuid: "test123" }; resolve(window.H5guard.sign(JSON.stringify(params))); } else { resolve(null); } }, 1500); }); } // 3. 执行并捕获错误 getMtgsig() .then(mtgsig => console.log('MTGSIG:', mtgsig)) .catch(err => console.error('执行错误:', err)); 获取不到H5guard
最新发布
08-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值