How to store input value into array then localstorage

Question

html file:

<!DOCTYPE html>

<html lang="en">

<head>
     <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  

  <!-- Latest compiled and minified CSS & JS -->

  <link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <script src="//code.jquery.com/jquery.js"></script>

  <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  

</head>

<body>

  <div class="form-group">

    <label for="">Type Your Task Below:</label>

    <input type="text"

      class="form-control" name="" id="text" aria-describedby="helpId" placeholder="">

<button class="btn  btn-success" id="add" value="add">Add</button>

<p id="task">Add some items</p>

    </div>

  <script src="file.js"></script>

</body>

</html>

js file:

let arr=[]


// we are making an todo list function

document.getElementById("add").onclick=(e)=>{


  let item=document.getElementById("text").value


  

  arr.push(item)

  localStorage.setItem("task",JSON.stringify(arr))

  

// 

// console.log(getitem)

  e.preventDefault()

}

Question: After reload the page,localstorage have the value with key untill i add more. How to do that?

Niroj · Answer 1 · Jul 24, 2020

Hello @ abhittac,

You have create the array everytime the method is called and you should call JSON.stringify(Array) on storing the item and JSON.parse(string_from_localStore) when loading the item from localStore.

But you should wrap the stringify in an try and catch block, because it can be some reasons when the json string is not well formed that your stringify method crashes the function and it stops working.

Sample code:

<html>
<body>

  <form>
    <input id="textInput" type=text>
    <input type=button onclick="myFunction()" value="Add Number"/>
  </form>
  <div id="output"><div>

  <script>
     var myFunc = function() {
      //load it at first from localstorage
      var sports = ["soccer", "baseball"];
      var localSports = [];
      try {
          localSports = JSON.parse(window.localStorage.getItem('sportskey'));
          if( localSports == null)
              localSports = sports;
      } catch(ex) {
          console.log("something wrong");
          localSports = sports; //fallback
      }
      var newSport = document.getElementById('textInput').value;
      localSports.push(newSport); //this is an array
      //insert the array with JSON.stringify so you can take it later out and rework with it          
      window.localStorage.setItem("sportskey", JSON.stringify(localSports));
      output.innerHTML = window.localStorage.getItem('sportskey');
       };
  </script>

</body>
</html>

You can refer to above code for you query.

Hope it helps!!
Thank you!!