Как локально сохранить (JS) кнопку HTML и получить кнопку / кнопки при загрузке страницы

Question

Мне нужна помощь с этим проектом, над которым я работаю. Часть, необходимая для этого вопроса, состоит в том, что пользователь создает кнопку и затем может щелкнуть по ней, чтобы обновить части страницы на основе идентификатора (созданного из пользовательского ввода) этой кнопки. Это работает.

Однако я хочу иметь возможность сохранять и извлекать эти кнопки, используя localStorage. Я работал с localStorage раньше, но ничего, что я пытаюсь, похоже, не работает. Можно ли даже хранить элементы HTML локально?

Просто ищу разъяснения, как мне следует go об этом, или пример.

Спасибо, Эллиот.

при загрузке страницы:

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);
    } 

  }

}