IE11控制台访问localStorage报类型错误求助（已启用DOM存储）

我之前在做IE11兼容项目时也踩过这个坑，明明已经开启了DOM Storage，Chrome里正常运行的代码到IE11就报错，折腾了好一阵才找到几个有效的解决方向：

• 严格确保存储内容为字符串类型
  IE11对localStorage的类型限制比Chrome苛刻太多——它只认字符串数据，不像Chrome会自动帮你把对象、数字、布尔值这类非字符串转成字符串。如果你的代码直接存了对象、null或者undefined，立刻就会触发这个类型错误。

  解决办法很简单：用JSON.stringify()把非字符串数据转成JSON字符串再存储，读取时用JSON.parse()解析回来：

  // 存储对象示例
  const userInfo = { name: "demo", id: 456 };
  localStorage.setItem("user", JSON.stringify(userInfo));
  
  // 读取数据示例
  const savedUser = JSON.parse(localStorage.getItem("user"));
  

  如果是单个非字符串值（比如数字），直接用String()转成字符串也可行：

  localStorage.setItem("count", String(200));
  

• 避开null/undefined这类特殊值
  比如你不小心写了localStorage.setItem("key", undefined)，Chrome会默认存成字符串"undefined"，但IE11直接就抛出类型错误。所以存数据前最好加个判断，把null/undefined替换成空字符串或者合理的默认值。

• 检查页面访问协议
  如果你的页面是通过file://协议直接打开的本地HTML文件，IE11对这种场景下的localStorage支持有兼容性bug，Chrome则完全没问题。解决办法是搭个简单的本地HTTP服务器（比如用Node.js的http-server工具），通过http://localhost访问页面。

• 排查浏览器安全设置
  虽然你已经勾选了"Enable DOM Storage"，但IE11的隐私或安全级别过高也可能卡壳：

  • 试试把当前网站添加到IE的「信任站点」列表
  • 临时把安全级别降到「中低」测试（之后可以改回原设置）
  • 确认没有开启「阻止所有Cookie」的选项（IE里localStorage和Cookie的权限设置有一定关联）

• 用最小化场景排查代码干扰
  有时候是第三方脚本或者你的代码里其他逻辑修改了localStorage的行为。可以先在IE11控制台单独执行最基础的存储命令：

  localStorage.setItem("test_key", "test_value");
  

  如果这个命令都报错，那大概率是浏览器环境的问题；如果能正常执行，就回到你的代码里排查哪一段存储的数据不符合IE11的要求。

内容的提问来源于stack exchange，提问作者Nidheesh