Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to set elements and their values in local storage using a class selector , querySelectorAll?

  • I am trying to make a to do list and right now when I press on the add task button 2 inputs and 1 select element are being created and displayed on the page.I save the content and display it and its just the nodelist string

Now I know querySelectorAll gives a nodeList and local storage only stores strings.

  • How can I make the nodeList appear as the HTML elements and their values instead of the nodelist string?
  • My broken code:
//Implementing local storage
document.addEventListener("DOMContentLoaded",function() {
//Save sct1taskTable into localStorage
sct1SaveToLocalStorageBtn.addEventListener("click",() => {
        const taskTableContent = document.querySelectorAll(".task-table-child");
        localStorage.setItem("taskTableContentKey",taskTableContent);
        alert("Content saved :D");

})
//Retrieve sct1taskTable into localStorage
sct1LoadFromLocalStorageBtn.addEventListener("click",() => {
        const loadedTaskTableContent = localStorage.getItem("taskTableContentKey");
        sct1taskTable.innerHTML = loadedTaskTableContent;
        alert("Content loaded :D")
})
});
Tags:

2

Answers


  1. 0

    You can change your approach. Your goal is to store the to-do list data and then restore it.This data doesn’t necessarily have to be HTML nodes; it can be an object. When you restore the nodes, use the stored object data to recreate the nodes.

    sct1SaveToLocalStorageBtn.addEventListener("click", () => {
  const taskTableContent = document.querySelectorAll(".task-table-child").map((el) => el.innerText);
  localStorage.setItem("taskTableContentKey", taskTableContent);
  alert("Content saved :D");

})
//Retrieve sct1taskTable into localStorage
sct1LoadFromLocalStorageBtn.addEventListener("click", () => {
  const loadedTaskTableContent = localStorage.getItem("taskTableContentKey");
  loadedTaskTableContent.forEach((text) => {
    const div = document.createElement('div');
    div.innerText = text;

    sct1taskTable.append(div);
  })

  alert("Content loaded :D")
})
    Login or Signup to reply.
  2. 0

    document.querySelectorAll(".task-table-child") will retrieve an array-like-object whose elements are all elements that match your selector of ".task-table-child" at the time you called it. To convert all these into HTML string, you could do something like this:

    console.log([...document.querySelectorAll(".task-table-child")].map(item => item.outerHTML).join(""))
    <div class="parent">
    <div class="task-table-child"><p>something</p></div>
    <div class="task-table-child"><p>something else</p></div>
</div>

    I have queried your elements, converted the array-like-object into an actual array via the [...<something here>] operator and called map on the array to replace the items with their outerHTML (you could use innerHTML instead if you prefer) and then converted it into a string via .join(""). So, you could do something like

    localStorage.setItem("taskTableContentKey",[...document.querySelectorAll(".task-table-child")].map(item => item.outerHTML).join(""));

    Loading things back would look like

    const loadedTaskTableContent = localStorage.getItem("taskTableContentKey");

    and then you can write this wherever you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search