How to use localstorage for arrays in javascript

Question

0.00/5 (No votes)

See more:

Hello! I am trying to use local storage to save one of my arrays, pokemonchosen.here is the code:

var pokemonchosen = [];

How would I make it to where if refresh or browser close, the array pokemonchosen stays like it is? But I have a weirder problem than others, pokemonchosen doesn't have a value until someone buys a pokemon, in which case:

pokemonchosen.push("Charmander");

How would I make it where sets local storage on buy pokemon? This is one of many functions for pokemon:

function buymagikarp() {
  if(coins >= 100 ) {
    swal("Success", "You bought 1 magikarp!", "success");
    coins -= 100;
    pokemonchosen.push("Magikarp");
    document.getElementById("p1").innerHTML = "Coins: " + coins;   
    localStorage.setItem('coins', coins);
  } else {
    swal("Error", "Not enough balance", "error");
  }
}

Thank you :-)

What I have tried:

if(pokemonchosen != undefined) {
var JSONReadyUsers = JSON.stringify(pokemonchosen);
localStorage.setItem('pokemonchosen', JSONReadyUsers)
}

Posted 3-Aug-17 5:11am

Member 13257242

Updated 4-Sep-20 14:14pm

Add a Solution

Comments

ZurdoDev 3-Aug-17 11:21am

localStorage.setItem('pokemonchosen', JSONReadyUsers) should work, so what is the problem?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thomas Daniels · Answer 1 · 2017-08-03T05:23:00

Solution 1

Your code in "What I have tried" will work, so you have that already! Here is how you can load the array again:

JavaScript

pokemonchosen = JSON.parse(localStorage.getItem('pokemonchosen'));

JSON.parse() - JavaScript | MDN[^]

Posted 3-Aug-17 5:23am

Thomas Daniels

Updated 3-Aug-17 5:24am

v2

Comments

Member 13257242 3-Aug-17 11:34am

Where would I put this? inside or outside of the if statement?

Thomas Daniels 3-Aug-17 11:43am

This code (i.e. getItem) needs to run on your page load, to restore the chosen pokemons.

And for setItem, you have to run that every time that 'pokemonchosen' gets updated.

Member 13257242 3-Aug-17 11:37am

And also, pokemonchosen starts out at undefined, so when they buy a pokemon everything in the if statement should be executed correctly?

Member 13257242 3-Aug-17 14:15pm

It gives me the error:
Uncaught ReferenceError: JSONReadyUsers is not defined
at buymagikarp (script.js:35)
at HTMLInputElement.onclick (battle.html:131)

I'm sure this means that the Jquery is not working. Here is the tags that I put inside of the battle.html :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>&script type="text/javascript">function getName2 {
var JSONReadyUsers = JSON.stringify(pokemonchosen);
localStorage.setItem('pokemonchosen', JSONReadyUsers)
}</script>

Thomas Daniels 3-Aug-17 14:17pm

Well, if you are using JSONReadyUsers outside of getName2, it won't work because the scope of JSONReadyUsers is only getName2.

Member 13257242 3-Aug-17 14:22pm

Even after defining JSONReadyUsers outside of getName2 BOTH in the script tag and in the script.js, It still won't work.

Thomas Daniels 3-Aug-17 14:23pm

Well, you don't need to define it twice... And what does "won't work" mean?

Member 13257242 3-Aug-17 14:38pm

"won't work" means I still get the same error: here is my website if you want to check it out and see the error pokemonupgrade.000webhostapp.com

Thomas Daniels 3-Aug-17 14:43pm

I'm not going to debug your website, sorry.

The error says what it says: "JSONReadyUsers" is not defined. Look at where you define it, where you use it, and where the error happens - then think about why it would not be defined where the error happens.

Member 13257242 4-Aug-17 10:20am

It still doesn't work. I fixed the code a bit and added this into each of the buy functions:

function buymagikarp() {
if(coins >= 100 ) {
swal("Success", "You bought 1 magikarp!", "success");
coins -= 100;
document.getElementById("p1").innerHTML = "Coins: " + coins;
localStorage.setItem('coins', coins);
} else {
swal("Error", "Not enough balance", "error");
}
if(pokemon1 == "") {
pokemon1 += "Magikarp";
localStorage.setItem('Magikarp', pokemon1);
}
if (localStorage.getItem("pokemon1") === null) {
localStorage.getItem('pokemon1');
}
}

I really don't understand why it doesn't work. You probably already understand my skill level of this type of code, but I cannot justify why my code doesn't work. Please help!

Thomas Daniels 4-Aug-17 10:23am

I have no idea what you're trying to do (and "doesn't work" does not give any information at all), but what is the point of the getItem('pokemon1') call in the if statement if getItem("pokemon1") is null? It doesn't do anything.

Member 14930975 · Answer 2 · 2020-09-04T14:15:00

Solution 2

You must first declare "coins" as a variable before you can use it.
example: var coins = localStorage.getItem ('coins');

Posted 4-Sep-20 14:15pm

Member 14930975