localstorage - save array

Question

I have localstorage working to where I can save inputs and push them to a list. Now I would like to save the list in localstorage because when I reload the list resets because of var fav = new Array(); is defined at the start in this jsFiddle. How can I work around this?

Thanks, Ben

convert it to json before saving it and decode it when retrieving it — John Conde, Apr 10 '14 at 15:07
You want to store the `fav` array in `localStorage`? Your list is not resetting on load because of the `var` declaration, it's resetting because your not saving it anywhere, and on refresh, `fav` is a new variable. To store the `fav` array in `localStorage` you would have to store it as a string. See here: [link](http://stackoverflow.com/questions/3357553/how-to-store-an-array-in-localstorage) — Akurn, Apr 10 '14 at 15:10
Does this answer your question? [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — sld, Sep 05 '21 at 06:03

score 19 · Accepted Answer · edited Apr 10 '14 at 15:11

19

It's realy easy, you just need to use JSON data to save it :

// Save
var datas = ["1", "2", "3"];
localStorage["datas"] = JSON.stringify(datas);

// Retrieve
var stored_datas = JSON.parse(localStorage["datas"]);

edited Apr 10 '14 at 15:11

Andy

61,948
13
68
95

answered Apr 10 '14 at 15:10

Arthur

4,870
3
32
57

Thank you, this works; however, once I reload the page and store a new string, the array resets. New jsFiddle: http://jsfiddle.net/sG99W/3/ – benjipelletier Apr 10 '14 at 22:51
2

@Andy I managed to fix this by checking if the array was empty or not. Thanks again for the solution. http://jsfiddle.net/sG99W/5/ – benjipelletier Apr 12 '14 at 05:26
It was @Arthur's solution, not mine. – Andy Apr 12 '14 at 12:28
Anyone have any ideas on why I may be getting undefined when I console.log(stored_datas);?? – May 22 '15 at 01:41

score 3 · Answer 2 · answered Dec 30 '20 at 17:59

The reason some people are getting undefined is because of JS.. for example, if you run [][0] it is undefined. The answer from Andy/Arthur above initially worked locally for me but ended up breaking in production. I fixed it by using the methods/syntax defined in the MDN docs using it as so...

to set a value:

const myArray = []
localStorage.setItem('myArray', JSON.stringify(myArray))

to get a value:

const myArrayFromLocalStorage = localStorage.getItem('myArray')
if (myArrayFromLocalStorage && myArrayFromLocalStorage.length) {
const myArray = JSON.parse(myArrayFromLocalStorage)
}

to clear a value:

localStorage.removeItem('myArray')

score 0 · Answer 3 · answered Jul 17 '17 at 19:16

This is simple to do with localDataStorage, where you can transparently set/get any of the following "types": Array, Boolean, Date, Float, Integer, Null, Object or String.

[DISCLAIMER] I am the author of the utility [/DISCLAIMER]

Examples:

localDataStorage.set( 'key1', 'Belgian' );
localDataStorage.set( 'key2', 1200.0047 );
localDataStorage.set( 'key3', true );
localDataStorage.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } );
localDataStorage.set( 'key5', null );

localDataStorage.get( 'key1' );   -->   'Belgian'
localDataStorage.get( 'key2' );   -->   1200.0047
localDataStorage.get( 'key3' );   -->   true
localDataStorage.get( 'key4' );   -->   Object {RSK: Array(5)}
localDataStorage.get( 'key5' );   -->   null

As you can see, the primitive values are respected. In your case, we would do this:

>localDataStorage.set( 'datas', ["1", "2", "3"] );

Note that we didn't need to do any stringification to our key value. You can specify it plainly and clearly. Now, when we retrieve it...

>localDataStorage.get( 'datas' ) -->

... we will get:

>(3) ["1", "2", "3"]

exactly what we started with, without having to convert anything.

Matas Vaitkevicius · Answer 4 · 2014-04-10T15:15:17.217

-1

If you want to prevent your variable from being reset try this, if you want to reload page and keep old value this is not gonna help thought.

  if (typeof fav === 'undefined'){
        var fav = new Array();}

edited Apr 10 '14 at 15:15

answered Apr 10 '14 at 15:09

Matas Vaitkevicius

58,075
31
238
265

localstorage - save array

4 Answers4

Linked