如何在本地存储（JS）HTML按钮并在页面加载时检索按钮

Question

我正在为我正在从事的这个项目寻求帮助。该问题所需的部分是用户创建一个按钮，然后可以单击该按钮以基于该按钮的ID（从用户输入创建）来更新页面的各个部分。这有效。

但是，我希望能够使用localStorage保存和检索这些按钮。我之前使用过localStorage，但似乎没有任何尝试。甚至可以在本地存储HTML元素吗？

[只是寻找我应该如何做的澄清，或举一个例子。

谢谢，艾略特。

页面加载：

if (typeof(Storage) !== "undefined") {
        let groupsLoaded = localStorage.getItem("storedGroupArray");
        $("#createdGroups").prepend(groupsLoaded);
}

创建和（希望）存储按钮时：

let groupArray = [];
      function addGroup() {
        let userInput = $("#groupName").val();
        if(userInput.length >= 1) {
          let newGroup = $(`<button id='${userInput}' class='createdGroupsButton'>${userInput}</button>`);
          $("#createdGroups").append(newGroup);
          groupArray.unshift(newGroup);
          let groups = localStorage.setItem("storedGroupArray", userInput);
          $("#groupName").val("");
        } else {
          alert("Please enter a group name.")
        }
      };

链接到这么远的代码：

https://codepen.io/elliot7-7/pen/zYvrBWy

（忽略任务部分）

Answer 1

我将在localStorage中存储一组创建的组名。

稍后可以使用指定的模板将它们作为html元素进行检索和处理。

let groupArray = [];
let groupNames = [];

function addGroup() {
  let userInput = $("#groupName").val();

  if(userInput.length >= 1) {
    let newGroup = $(`<button id='${userInput}' class='createdGroupsButton'>${userInput}</button>`);
    $("#createdGroups").append(newGroup);
    groupArray.unshift(newGroup);

    groupNames = [...groupNames, userInput];
    localStorage.setItem("storedGroupArray", JSON.stringify(groupNames));

    $("#groupName").val("");

  } else {
    alert("Please enter a group name.")
  }
};

if (typeof(Storage) !== "undefined") {
  let storedGroupNames = JSON.parse(localStorage.getItem("storedGroupArray"));

  if(storedGroupNames) {
    for(let groupName of storedGroupNames) {
      let newGroup = $(`<button id='${groupName}' class='createdGroupsButton'>${groupName}</button>`);
      $("#createdGroups").append(newGroup);
    } 

  }

}