CODEWITHSUNDEEP
javascripthtmllocal-storage
Nipun Tharuksha
Nipun Tharuksha

Reputation: 2567

Retrive all stored values in local storage

Primary requirement

What I really wants to achieve is that there is a text box with a button where user can input values and then those values will be saved into localStorage via different keys (so that even in page refresh these values can be retrieved) and also inserted values will be displayed under the text box.

What I did to accomplish this:

HTML

<div>
  <input type="text" name="userInputs" placeholder="Please insert the value" id="idUserInputs">
  <button onclick="insertUserInput()">Add</button>
  <p id="hiddenP"></p>
</div>

JavaScript

<script>
  var i = 0;
  function insertUserInput() {
    i++;
    //fetch the value
    var insertedValue = document.getElementById("idUserInputs").value;
    //set the value to show user
    document.getElementById("hiddenP").innerHTML = insertedValue;
    //set the value to localstorage with different key(via incremental i)
    window.localStorage.setItem("savedValues" + i, insertedValue);
  }
</script>

To retrieve the data if user refresh the tab just added <body onload=funcrtion() and the function coded as shown below:

<body onload="onloadRetrieveData()">

 function onloadRetrieveData() {
      //check the length 
      var length = localStorage.length;
      var x;
      for (x = 1; x <= length; x++) {
        document.getElementById("hiddenP").innerHTML = window.localStorage.getItem('savedValues' + x);
      }

This will retrieve the last data that user inserted. Like below

snap

I started this based on this article

The complete guide to using localStorage in JavaScript apps

What I wants right now is when user refresh the tab all saved data in local storage to be retrieve and show to user. Can anyone help me with this? Thanks

Upvotes: 2

Views: 548

Answers (1)

djs
djs

Reputation: 4065

Here is one way one way to accomplish this, using the code you already have with a few small adjustments for how you add the final result to the DOM:

var hiddenP = document.getElementById('hiddenP');
var ul = document.createElement('ul');

function onloadRetriveData() {
  //check the length 
  var length = localStorage.length;
  var storedValues = [];
  console.log(length);
  var x;
  for (x = 1; x <= length; x++) {
    var li = document.createElement('li');
    var textContent = document.createTextNode(window.localStorage.getItem('savedValues' + x));
    li.appendChild(textContent);
    ul.appendChild(li);
  } 
  hiddenP.appendChild(ul);
}

That would show all of the items in local storage in an unordered list, you could of course choose to display them in any format you wish.

Here is a short summary of what's going on, in case anything is unclear.

Code Summary

In this version, we are creating an unordered list:

var ul = document.createElement('ul');

Then, we add each item from local storage to the list as we go through the loop:

for (x = 1; x <= length; x++) {
    var li = document.createElement('li');
    var textContent = document.createTextNode(window.localStorage.getItem('savedValues' + x));
    li.appendChild(textContent);
    ul.appendChild(li);
}

Notice that we create a new list element each pass:

var li = document.createElement('li');

Then, we create a textNode with the item from local storage as the value:

var textContent = document.createTextNode(window.localStorage.getItem('savedValues' + x));

Then, we add this text node to the list item and finally add the list item to the unordered list using the appendChild() method:

li.appendChild(textContent);
ul.appendChild(li);

Then, after the loop, we add the whole list to the hiddenP paragraph element, again using the appendChild() method:

hiddenP.appendChild(ul);

Upvotes: 2

Related Questions