How to add multiple text to local Storage HTML5
Question
I created a few functions and some input boxes with a table to show the data when page is reloaded. The issue I am having is how do I get multiple inserts to local storage and be able to show all the data on the table with a loop statement. Also is there way to show the data right away instead of reload. I guess I am just confused with local Storage and I was trying to see how it works. https://jsfiddle.net/zzLumrsd/
<!DOCTYPE>
<html>
<head>
<title> Local storage</title>
<style type="text/css">
table#table1{
width: 10%;
background-color: #gray;
}
</style>
<script>
function saveMy(){
var fieldValue = document.getElementById('textfield').value;
localStorage.setItem('text', fieldValue);
}
function load(){
var storedValue = localStorage.getItem('text');
if(storedValue){
document.getElementById('textfield2').value = storedValue;
}
}
function removeMy() {
document.getElementById('textfield').value = '';
localStorage.removeItem('text');
}
</script>
</head>
<body onload="load()">
<input type="text" id="textfield" />
<input type="button" value="save" onclick="saveMy()"/>
<input type="button" value="remove" onclick="removeMy()"/>
<hr/>
<table id="table1" border="1">
<tr>
<th>text</th>
</tr>
<tr>
<td>
<input type="text" id="textfield2" />
</td>
</tr>
</table>
</body>
</html>
1 answers
solution1
3 ACCPTED 2015-04-07 17:16:19
As far as I understand, you want to store multiple strings into localStorage . You could achieve that using the following:
How
To achieve this, you would store all the Strings in an array. We can then put this into localStorage. In the examples, I will be using 'names' as the localStorage item name. An array can't be put into localStorage so we have to make it a String using JSON.stringify to do that.
Examples
Setting the Item
var vals = [];
vals.push('Bob');//Add the text 'item1' to vals
localStorage.setItem('names', JSON.stringify(vals));
Getting the Item
vals = JSON.parse(localStorage.getItem('name'));
In this, we will get the item from localStorage, and make the string into an array again using JSON.parse
Further Explanation
localStorage is an browser API that allows us to store data on a users computer. localStorage is somewhat like cookies but are less limited and don't expire.
We want to store in this case, names, in localStorage . You can store anything JavaScript in localStorage. Stack Overflow stores timestamps and a few other things in your localStorage .
Each item , or 'thing' in localStorage, has a name , and a value .
When using localStorage.setItem('name', 'Bob') , you create an item called name and it's value is Bob
This is all well and good until you want to add a second name. JavaScript has arrays which can store multiple values in one 'variable'. This means you can store multiple names, in one variable/item. The following is an example of an array
var myArray = ['Bob', 'Joe', 'Phil'];
That array has three values: Bob , Joe , and Phil . You can add an item into an array using Array.push() . I'm going to link an article on arrays here
Okay, so now you have your three values in an array and you want to store it. localStorage values can only be strings ! JSON is is a special type of 'variable' similar to a JavaScript object, you can learn about it here . In simple terms, an array is 'JSON'.
Because localStorage only takes strings, we must turn our array (JSON) into a string which we can store. The way this is done is JSON.stringify(ARRAY_HERE) . This will return a string like :
"["Bob","Joe","Phil"]"
Now that our array is a string, we can put it into localStorage using localStorage.setItem() .
What do we do when we want to retrieve this?
To retrieve the array, we will use localStorage.getItem() . In localStorage.getItem() you put the name of the item you wish to access and it will return it. But the problem is it is still a string. That's where JSON.parse() comes in. This will convert our 'stringified' array into an actual array.
What does this all have to do
I want to store three names in localStorage
How would you do that? It's simple, what you add the names to the array using .push() , then you store it. When you want to display it, use the localStorage.getItem() I described before.
Further Reading
I wrote a lot but that might not be enough, check out the following:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.