使用本地存储在页面重新加载时保存 HTML class（隐藏）

Question

我正在构建一个纯文本 RPG HTML/JavaScript。我使用 simple storage 设置了本地存储，让我的生活更轻松。也就是说，我运行遇到了一个关于宝箱的有趣问题。如果您打开一个箱子，该函数会正确隐藏按钮以防止再次打开箱子。但是如果你在保存后重新加载页面，宝箱会重新出现！添加到箱子的 class 被移除，允许玩家再次从中拉出。由于他们的库存正确保存，理论上他们可以获得无限药水。

HTML:

<button id="chest-1" onclick="openChest(potion, this.id)" onload="toggleChests()">Open Chest</button>

JS:

let opened = document.getElementsByClassName("opened"); opened.hidden = true;
function openChest(item, id){
  inventory.push(item);
  document.getElementById(id).hidden = true;
  document.getElementById(id).classList.add("opened");
  alert("You found: " + item.name + " - in the chest!");
  simpleStorage.set("opened", opened);
};

当游戏加载时，它应该检查箱子 class 是否已保存，如果已保存则应用它。我认为这肯定是我弄错的地方。

function toggleChests(){
  opened = simpleStorage.get("opened", opened);
  if (opened === true){
    opened.hidden = true;
  }
};

项目源码： https://github.com/AndyDaMandy/Textia

Answer 1

感谢 Heretic Monkey 和 Cbroe 的一些提示，我弄明白了。

我通过将每个打开的箱子的 id 字符串推入一个名为“opened”的数组来解决这个问题。保存时，数组被保存。加载时，打开会重新加载。然后加载函数调用 applyOpened 函数，然后将 .map 应用于数组。它获取每个 id 并将其放入 document.getElementById，然后向其添加隐藏属性。这是在为播放器加载页面之前完成的，以防止他们在不使用控制台的情况下访问元素（那将是作弊！）。同样，简单的存储使得我不需要将数组转换为字符串，但它也应该适用于常规本地存储！

代码如下：

 let opened = []; 
 function openChest(item, id){
  inventory.push(item);
  document.getElementById(id).hidden = true;
  opened.push(id);
  alert("You found: " + item.name + " - in the chest!"); 
};
function applyOpened () {
 function apply(arr) {
   document.getElementById(arr).hidden = true;
 } 
  opened.map(apply);
};
function save() {
 simpleStorage.set("opened", opened);
};
function load(){
opened = simpleStorage.get("opened", opened);
 applyOpened();
};

这是宝箱的 html：

<button id="chest-1" onclick="openChest(potion, this.id)">Open Chest</button>

使用本地存储在页面重新加载时保存 HTML class（隐藏）

Saving an HTML class (hidden) upon page reload with Local Storage

html

javascript

game-development

local-storage