I am currently working on a little browser game and I am using the HTML localStorage to save some data.

The problem: I have an empty array that i will later .push() some data into. I am storing this array in the localStorage but when i try to read from the local storage it doesn't work.

The Chrome Developer Tools console is giving me this error: "Uncaught SyntaxError: Unexpected token u" when trying to parse the data from localStorage.

Here's the code i am using:

var allContracts = [];
localStorage["allContracts"] = JSON.stringify(allContracts);

allContracts = JSON.parse(localStorage["allContracts"]);

There is more code than this but none of it is interacting with these in any way.

Is there a quirk with localStorage or JSON that i am not aware of and is causing this? (i am not very familiar with JSON or localStorage) Should i be doing this a different way? Or am i just missing an obvious mistake?

Thanks in advance :)

I am currently working on a little browser game and I am using the HTML localStorage to save some data.

The problem: I have an empty array that i will later .push() some data into. I am storing this array in the localStorage but when i try to read from the local storage it doesn't work.

The Chrome Developer Tools console is giving me this error: "Uncaught SyntaxError: Unexpected token u" when trying to parse the data from localStorage.

Here's the code i am using:

var allContracts = [];
localStorage["allContracts"] = JSON.stringify(allContracts);

allContracts = JSON.parse(localStorage["allContracts"]);

There is more code than this but none of it is interacting with these in any way.

Is there a quirk with localStorage or JSON that i am not aware of and is causing this? (i am not very familiar with JSON or localStorage) Should i be doing this a different way? Or am i just missing an obvious mistake?

Thanks in advance :)

• javascript
• arrays
• json
• html
• local-storage

• 1 Works just fine for me ? – adeneo Commented Feb 8, 2016 at 15:46
• 1 I can't reproduce the issue on latest chrome, even after adding a push after your parse and writing again. – ssube Commented Feb 8, 2016 at 15:46
• Couldn't replicate either, you need to provide more details. – Vikram Palakurthi Commented Feb 8, 2016 at 16:17
• I can't reproduce your issue in Firefox or Chrome. – Marco Castelluccio Commented Feb 8, 2016 at 16:44
• 1 @MarcosPérezGude oops, tried accepting multiple answers... yeah... you can tell i am new around here :P – Vlad2000Andrei Commented Feb 8, 2016 at 17:10

4 Answers 4

The best way is to use the methods that the interface of localStorage serves to you. It have setItem() and getItem() methods, so why not use to safe yourself?

var allContracts = [];
// setter
localStorage.setItem("allContracts",  JSON.stringify(allContracts));
//getter
var allContracts = JSON.parse(localStorage.getItem("allContracts"));

With your piece of code, you are overriding the localStorage global object with your own values, so you lost the functionality.

You make this:

localStorage = [] // transform the default localstorage into an array

And you need this:

localStorage.setItem(key, value)

More info: https://developer.mozilla/en-US/docs/Web/API/Window/localStorage

I have only just started using localStorqage myself, but it looks like you should be using window.localStorage.setItem() and window.localStorage.getItem()

You can use Reusable Approach like this.

export const localData = {
    set(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key) {
        const stored = localStorage.getItem(key);
        return stored == null ? undefined : JSON.parse(stored);
    },
    remove(key, value) {
        localStorage.removeItem(key);
    }
};

localData.set("user_name", "serialCoder")
console.log( "After set