如何使用按钮将文本输入保存和显示到本地存储

Question

So I am trying save the value of the text inputs to local storage after a user enters it using a button. Once they save it, they click another button to show the contents of local storage in another text area. I've tried every method I could think of. Thanks in advance.

 <script> function add_local(){ window.localStorage['display'] = document.getElementById('firstname').value; window.localStorage['display']= document.getElementById('age').value; window.localStorage['display']= document.getElementById('course').value; } function show_local(){ document.getElementById('firstname').value = window.localStorage['display']; document.getElementById('age').value = window.localStorage['display']; document.getElementById('course').value = window.localStorage['display']; } </script>

 <input type="text" id="firstname" /><br /><br /> <label for="age">Age</label><br /> <input type="text" id="age" /><br /><br /> <label for="course">Favorite Course</label><br /> <input type="text" id="course" /><br /> </div> <div class="right"> <input type="button" value="Add to localStorage" onclick="add_local()" /> <input type="button" value="Add to sessionStorage" /> <input type="button" value="Show localStorage" onclick="show_local()"/> <input type="button" value="Show sessionStorage" /> </div> </div> <div class="display"> <label for="display">Display</label><br> <textarea id="display" name="display" rows="10" ></textarea> </div> </div> </body>

Answer 1

in local storage you have method to set and get

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

like

    localStorage.setItem('myCat', 'Tom');

    const cat = localStorage.getItem('myCat');

with those method you save to localStorage

Answer 2

You did almost everything right. Just replace the following JS code with your js. You just made replacing your old storage data while assigning with a new one.

   function add_local() {
    window.localStorage['firstname'] = document.getElementById('firstname').value;
    window.localStorage['age'] = document.getElementById('age').value;
    window.localStorage['course'] = document.getElementById('course').value;
}

function show_local() {
    document.getElementById('firstname').value = window.localStorage['firstname'];
    document.getElementById('age').value = window.localStorage['age'];
    document.getElementById('course').value = window.localStorage['course'];
}

Answer 3

Try this :

   function add_local() {
   const display = {};
   display.firstname = document.getElementById('firstname').value;
   display.age = document.getElementById('age').value;
   display.course = document.getElementById('course').value;

   window.localStorage.setItem('display', JSON.stringify(display));
   

 }

and for show try this :

 function show_local() {

   let _display = JSON.parse(localStorage.getItem("display"));
   document.getElementById('firstname').value = _display.firstname;
   document.getElementById('age').value = _display.age;
   document.getElementById('course').value = _display.course;
   document.getElementById('display').value = Object.values(_display);
  
   }

https://jsfiddle.net/3tj8okxm/