How to store input value into array then localstorage

0 votes

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?

Jul 23, 2020 in Java-Script by abhittac
• 120 points

edited Jul 24, 2020 by Niroj 2,582 views

1 answer to this question.

0 votes

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!!

answered Jul 24, 2020 by Niroj
• 82,780 points

Related Questions In Java-Script

0 votes
1 answer

How to convert an Object {} to an Array [] of key-value pairs in JavaScript?

Hello @kartik, You can use Object.keys() and map() to do this var obj ...READ MORE

answered Sep 4, 2020 in Java-Script by Niroj
• 82,780 points
1,047 views
0 votes
1 answer

How to set Value of Input Using Javascript Function?

Hello @kartik, Try for YUI Dom.get("gadget_url").set("value",""); with normal Javascript document.getElementById('gadget_url').value = ''; with ...READ MORE

answered Oct 7, 2020 in Java-Script by Niroj
• 82,780 points
1,121 views
0 votes
1 answer

How to get the value of an input field using ReactJS?

Hello @kartik, Managed to get the input field ...READ MORE

answered Oct 8, 2020 in Java-Script by Niroj
• 82,780 points
3,853 views
+1 vote
2 answers

How to convert entire div data into image and save it into directory without using canvas?

Hello @kartik, You can try the sample code ...READ MORE

answered Apr 29, 2020 in Java-Script by Niroj
• 82,780 points
29,364 views
0 votes
1 answer
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17, 2020 in Web Development by anonymous
• 37,530 points
196 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,780 points

edited Jan 21, 2020 by Niroj 257 views
0 votes
1 answer

What is data binding in AngularJS?

Data binding is synchronization of data between the ...READ MORE

answered Jan 23, 2020 in Web Development by Niroj
• 82,780 points
143 views
0 votes
1 answer

How to get “value” of file upload input field in jquery?

Hello @kartik, Yes ,you can read the value ...READ MORE

answered Jul 7, 2020 in Java-Script by Niroj
• 82,780 points
4,550 views
0 votes
1 answer

How to show a different value from an input that what will be received as php?

Hello @kartik, You can't change the field's value ...READ MORE

answered Jul 7, 2020 in Java-Script by Niroj
• 82,780 points
2,886 views