Getting data from local storage in JavaScript

Question

I am making a Notes Taking website using JavaScript.In this everything work fine but when I refresh page only container show(i.e previously saved textarea field show but "content" from local storage doesn't show inside that container)

Can anyone help me to solve this issue? I am sharing my code with you

  
// adding data in local storage
function storingData(){
  
  var allNotes = document.querySelectorAll(".mainText")
 
  const notesData = [];

 
  allNotes.forEach((element)=>{
    return notesData.push(element.value)
    
  });
  
  
localStorage.setItem("notess", JSON.stringify(notesData));



}

  
  function addNote(){
    
    var mainDiv= document.createElement('div');
    mainDiv.classList.add('main');
 
    var noteField = `
  <div class="operation">
<i class="fa-solid savebtn fa-2x fa-floppy-disk "></i>
<i class="fa-solid fa-2x editBtn fa-pen-to-square"></i>
<i class="fa-regular fa-2x delete fa-trash-can"></i>
</div>
   <input type="text" class="title" placeholder="Enter title"/>
  <textarea class="mainText" placeholder="Enter Notes here"></textarea>
`;

mainDiv.insertAdjacentHTML('afterbegin',noteField);
document.getElementById('NoteSectionLayout').appendChild(mainDiv);

// references
var save = mainDiv.querySelector(".savebtn");
var maintext = mainDiv.querySelector(".mainText");
var title = mainDiv.querySelector(".title");
var edit = mainDiv.querySelector(".editBtn");
var del = mainDiv.querySelector(".delete");

// saving note
  save.addEventListener('click',()=>{
   maintext.setAttribute("disabled",true)
   title.setAttribute("disabled",true)
  storingData();
  });
  
  // editing note
  edit.addEventListener("click",()=>{
   maintext.removeAttribute("disabled");
   title.removeAttribute("disabled");
  });
  
  // delete note
  del.addEventListener("click",()=>{
    mainDiv.remove();
  });

  }  
 
 
 // getting data from local storage 
const notesSavedData = JSON.parse(localStorage.getItem("notess"));

  if(notesSavedData){
    notesSavedData.forEach((element) => addNote())
   // console.log("working") 
  }
 
  addBtn.addEventListener('click',addNote) ```

isnt the syntax `window.localStorage.getItem('');` and i believe all is single quote, but dont pin me on that one. You need to call on the fact that its saved in this window when you run on the localstorage. Localstorage is pane based as far as i know. https://blog.logrocket.com/localstorage-javascript-complete-guide/ — Dorvalla, Apr 04 '22 at 11:45
@Dorvalla No. `window` is the [global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object) on webpages, so you can access `localStorage` directly like this. And [single or double quotes make no difference](https://stackoverflow.com/questions/242813/when-should-i-use-double-or-single-quotes-in-javascript). — Ivar, Apr 04 '22 at 11:51
How exactly did you expect the content to be shown here? I don't see it in your `addNote()` function. (You're even completely ignoring the argument you are passing to it with `addNote(element)`.) — Ivar, Apr 04 '22 at 11:53
@Ivar Ok now I identified this mistake can u suggest me a way how can I display content in textarea — , Apr 04 '22 at 12:20
I see that in your edit you now removed the argument from `addNote(element)`, but that makes even less sense. Now the `.forEach()` will call `addNote()` without any information about what note to add. No information that was stored is passed to the `addNote()` function, so it has no way of knowing this. You'll need to pass this argument to the function and the in the `addNote()` function use that argument to add the information in the way you want it. I can't help you there as I don't know how you expect it to be shown. — Ivar, Apr 04 '22 at 12:23

Getting data from local storage in JavaScript

0 Answers0