使用localStorage操作JSON字符串时多余反斜杠问题求助

云原生阿岚

2026-6-21

问题根源与解决方法

你的核心问题是错误地对JSON字符串重复执行了JSON.stringify，导致数据被双重转义，出现多余反斜杠。另外直接通过正则/字符串操作JSON结构非常容易出错（比如逗号位置、边界情况处理），完全没必要这么做。

错误分析

你从localStorage取出的inventory已经是JSON格式的字符串（比如"[\"Helmet\",\"Healing_Kit\",\"Rope\"]"），但你又执行了JSON.stringify(inventory)，把这个字符串再次转成JSON，结果变成了"\"[\\\"Helmet\\\",\\\"Healing_Kit\\\",\\\"Rope\\\"]\""——里面的引号全部被转义，自然会出现多余反斜杠。

正确做法

永远遵循「先解析成JS对象/数组，用JS原生方法处理数据，再转成JSON存回」的流程：

从localStorage取出JSON字符串，用JSON.parse转成JS数组
使用数组的原生方法（比如filter或splice）移除指定元素
把处理后的数组用JSON.stringify转成JSON字符串，存回localStorage

修正后的代码

const starterInv = ["Helmet", "Healing_Kit", "Rope"];
// 初始化存储（仅第一次执行需要，后续可移除）
if (!localStorage.getItem("Inventory")) {
  localStorage.setItem("Inventory", JSON.stringify(starterInv));
}

// 正确数据处理流程
let inventory = JSON.parse(localStorage.getItem("Inventory"));

// 方案1：移除所有名为"Helmet"的元素
inventory = inventory.filter(item => item !== "Helmet");

// 方案2：仅移除第一个匹配的"Helmet"
// const helmetIndex = inventory.indexOf("Helmet");
// if (helmetIndex !== -1) {
//   inventory.splice(helmetIndex, 1);
// }

// 存回localStorage
localStorage.setItem("Inventory", JSON.stringify(inventory));