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 1,498 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,580 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,580 points
540 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,580 points
393 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,580 points
1,165 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,580 points
18,217 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,490 points
157 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,580 points

edited Jan 21, 2020 by Niroj 210 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,580 points
110 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,580 points
3,083 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,580 points
1,620 views