JSON.parse() from localStorage issue

Question

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 can't reproduce the issue on latest chrome, even after adding a push after your parse and writing again. — ssube
– ssube, Commented Feb 8, 2016 at 15:46
Couldn't replicate either, you need to provide more details. — Vikram Palakurthi
– Vikram Palakurthi, Commented Feb 8, 2016 at 16:17
@MarcosPérezGude oops, tried accepting multiple answers... yeah... you can tell i am new around here :P — Vlad2000Andrei
– Vlad2000Andrei, Commented Feb 8, 2016 at 17:10

Marcos Pérez Gude · Accepted Answer · 2016-02-08 15:48:02Z

3

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.org/en-US/docs/Web/API/Window/localStorage

answered Feb 8, 2016 at 15:48

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

gnerkus Over a year ago

Did you reproduce the issue?

Marcos Pérez Gude Over a year ago

That's a correct answer. Did you read carefully all my post? Can you tell us what's your problem?

gnerkus Over a year ago

You didn't explain why he was getting the error. I tried to reproduce the issue but couldn't.

gnerkus Over a year ago

You'll notice that others tried to reproduce it as well.

Marcos Pérez Gude Over a year ago

I explain it, but you don't understand it. I said:

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

|

baldmark · Accepted Answer · 2016-02-08 15:47:54Z

0

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

answered Feb 8, 2016 at 15:47

baldmark

71713 silver badges25 bronze badges

Comments

GMKHussain · Accepted Answer · 2022-12-09 11:54:49Z

0

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 👉", localData.get("user_name") )

localData.remove("user_name")
console.log( "After remove 👉", localData.get("user_name") )

answered Dec 9, 2022 at 11:54

GMKHussain

4,8151 gold badge36 silver badges22 bronze badges

Comments

Andrew · Accepted Answer · 2016-02-08 15:47:28Z

-2

You should use

localStorage.setItem('allContracts', JSON.stringify(allContracts));
localStorage.getItem('allContracts');

More details here: https://developer.mozilla.org/en-US/docs/Web/API/Storage

answered Feb 8, 2016 at 15:47

Andrew

1225 bronze badges

2 Comments

gnerkus Over a year ago

Did you try to reproduce the problem?

Marcos Pérez Gude Over a year ago

@gnerkus the answer is good, but he doesn't explain why. The problem is the OP is overriding the localstorage because he doesn't use the methods.

Collectives™ on Stack Overflow

JSON.parse() from localStorage issue

4 Answers 4

12 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

12 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related