本地存储问题

Question

我正在尝试使用本地存储，以便我的邀请在刷新时保留在页面上。我将如何在我的代码中实现这一点。我真的不知道从哪里开始，我真的很挣扎。请有人告诉我如何在我的代码中实现这一点。我一直在创建子元素并将它们附加到 HTML 中的 UL。

const form = document.getElementById("registrar");
const input = form.querySelector("input");
const mainDiv = document.querySelector(".main");
const ul = document.getElementById("invitedList"); 

const div = document.createElement('div');
const filterLabel = document.createElement('label');
const filterCheckBox = document.createElement('input'); 

filterLabel.textContent = "Hide those who havent responded";
filterCheckBox.type = 'checkbox';
div.appendChild(filterLabel);
div.appendChild(filterCheckBox);
mainDiv.insertBefore(div, ul);


/*
This creates a checkbox to see you has confirmed if they are coming
to the event or not.
*/

filterCheckBox.addEventListener("change", (e) => {
  const isChecked = e.target.checked;
  const lis = ul.children;
      if (isChecked) {
            for (let i = 0; i < lis.length; i += 1) {
            let li = lis[i]
            if (li.className === 'responded') {
             li.style.display = '';
            } else {
             li.style.display = 'none';
            }
          }
      } else {
          for (let i = 0; i < lis.length; i += 1) {
          let li = lis[i]
          li.style.display = '';
          }    
      }
});


/*
This function creates new list items (the invites). 
*/

createLi = (text) => {

  createElement = (elementName, property, value) => {

  const element = document.createElement(elementName);
  element[property] = value;
  return element;
  }

  appendElement = (elementName, property, value) => {
  const element = createElement(elementName, property, value);
  li.appendChild(element);
  return element;
  }

    const li = document.createElement("li");
    appendElement("span", "textContent", text);
    appendElement("label", "textContent", "Confirmed")
    .appendChild(createElement("input", "type", "checkbox"));
    appendElement("button", "textContent", "edit");
    appendElement("button", "textContent", "remove");
    return li;

}   


}

form.addEventListener("submit", (event) => {
    event.preventDefault();
    const text = input.value;
    input.value = "";
    const li = createLi(text);     
    ul.appendChild(li);
});

ul.addEventListener("change", () => {
   const checkbox = event.target;
   const checked = checkbox.checked;
   const listItem = checkbox.parentNode.parentNode;

 if (checked) {
   listItem.className = "responded";
} else {
   listItem.className = "";
}                    
});


          ul.addEventListener("click", (e) => {
          if (e.target.tagName === 'BUTTON') {

          const button = e.target;
          const li = button.parentNode;
          const ul = li.parentNode;
          const action = button.textContent;
          const nameActions = {
              remove: () => { 
                      ul.removeChild(li);
          },
              edit: () => {
                      const span = li.firstElementChild;
                      const input = document.createElement('input');
                      input.type = 'text';
                      input.value = span.textContent;
                      li.insertBefore(input, span);
                      li.removeChild(span);
                      button.textContent = 'Save'; 
          },
              Save: () => {
          const input = li.firstElementChild;
          const span = document.createElement('span');
          span.textContent = input.value;
          li.insertBefore(span, input);
          li.removeChild(input);
          button.textContent = 'edit';
          }
         }; 


           nameActions[action]();
         }




       });

Answer 1

我只能给你一个想法，如果你打算将任何大数据保存到localStorage，你可以将你的数据保存为字符串并将其重新制作为JSON对象！ 这是保存数据集的示例

var toSave = [ ];
var whatToSave = (Your invites data List, maybe a "text" var for your code?, organize 
to array or loop for your "UL" tag)

for(var i=0;i<whatToSave.length;i++){
   var obj = [];
   obj[i] = {
   text:whatToSave[i].text,
   data1:whatToSave[i].data1,
   data2:whatToSave[i].data2,
   ...
   }
   toSave.push(obj[i]);
}
var saveToString = JSON.stringify(toSave);
localStorage.setItem('invites', saveToString); //your invite data saved in local 
storage

....
//after refreshing or when you need to use your saved data

var cameBack = JSON.parse(localStorage.getItem('invites'));
//this will return same data again
//and make function to make UL using retured data array

如果您已经将需要的数据组织到数组中，则实际上不需要 for 循环和推送，只是为了让您了解将数据保存在 localStorage 中的想法而编写它。我不知道这是否会对您有所帮助，但可以得到一个想法并将其实施到您的项目中:)