How do I save and show text input to local storage using a button-CodePudding

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>

CodePudding user response：

in local storage you have method to set and get

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

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

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

with those method you save to localStorage

CodePudding user response：

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'];
}

CodePudding user response：

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/