How to display localStorage data

Question

How I can display localStorage information on my webpage?

I am easily setItem() to localStorage and when I console.log() it is showing but I cannot display it on the page(after reloading it is gone) I wanna keep this data on my page even when I am closing the tab Thank you in advance

const title = document.querySelector("#title");
const author = document.querySelector("#author");
const rating = document.querySelector("#rating");
const category = document.querySelector("#category");
const bookList = document.querySelector("#book-list");

document.querySelector("#book-form").addEventListener("submit", (e) => {
  e.preventDefault();
});
document.querySelector("#submit-btn").addEventListener("click", function () {
  if (
    title.value === "" ||
    author.value === "" ||
    rating.value === "" ||
    category.value === ""
  ) {
    alert("Please fill the form");
  } else {
    //  Creating tr th and appending to list
    const bookListRow = document.createElement("tr");
    const newTitle = document.createElement("th");
    newTitle.innerHTML = title.value;
    bookListRow.appendChild(newTitle);
    const newAuthor = document.createElement("th");
    newAuthor.innerHTML = author.value;
    bookListRow.appendChild(newAuthor);
    const newRating = document.createElement("th");
    newRating.innerHTML = rating.value;
    bookListRow.appendChild(newRating);
    const newCategory = document.createElement("th");
    newCategory.innerHTML = category.value;
    bookListRow.appendChild(newCategory);

    const deleteBtn = document.createElement("th");
    deleteBtn.classList.add("delete");
    deleteBtn.innerHTML = "X";
    bookListRow.appendChild(deleteBtn);

    bookList.appendChild(bookListRow);

    //Storage
    let storageTitle = title.value;
    let storageAuthor = author.value;
    let storageRating = rating.value;
    let storageCategory = category.value;

    localStorage.setItem("title", JSON.stringify(storageTitle));
    localStorage.setItem("author", JSON.stringify(storageAuthor));
    localStorage.setItem("rating", JSON.stringify(storageRating));
    localStorage.setItem("category", JSON.stringify(storageCategory));

    for (var i = 0; i < localStorage.length; i++) {
      newTitle += localStorage.getItem(localStorage.key(i));
    }
    // Clear
    title.value = "";
    author.value = "";
    rating.value = "";
    category.value = "";
  }
});

// Remove each books by clicking X button
bookList.addEventListener("click", (e) => {
  e.target.parentElement.remove();
}); ```

score 0 · Answer 1 · answered Dec 12 '21 at 09:20

0

the question of your code may is that you just save the data to the localStoarge, but at the initial of the page ,you did't get the data from the localStorage, you should get data like this:

window.onload = function (){
  let storageTitle = JSON.parse(localStorage.getItem("title"));
  document.querySelector("#title").innerHtml = storageTitle;
}

answered Dec 12 '21 at 09:20

screw spike

371
1
6

No, it is also net helping – Turinbek Malikov Dec 12 '21 at 13:24

score 0 · Answer 2 · answered Dec 12 '21 at 09:31

0

this code should be working can you specify the problem a little further!

answered Dec 12 '21 at 09:31

Suliman Noor

84
6

Actually, it is working and showing in the localStorage(even I close the window) but I cannot display it on the HTML – Turinbek Malikov Dec 12 '21 at 11:04
can you post you html as well! – Suliman Noor Dec 14 '21 at 11:03

score 0 · Answer 3 · answered Dec 12 '21 at 09:31

0

You are setting it correctly but not reading it as you should. Local storage persists data even if you close the tab, so it is just your code that is causing you trouble. You can find an explanation how you should work with local and session storage here. https://stackoverflow.com/a/65655155/2563841

answered Dec 12 '21 at 09:31

Sasa

32
3

You are right but no result and I read the clarification as well but not helping to fix – Turinbek Malikov Dec 12 '21 at 13:25

How to display localStorage data

3 Answers3