How To Add Multiple Text To Local Storage Html5

September 29, 2023 Post a Comment

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 a

Solution 1:

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 valslocalStorage.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.

JavaScript Apprenticeships