Reputation: 2567
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 key
s (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
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
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