CODEWITHSUNDEEP
javascriptlocal-storagephaser-framework
QuimB
QuimB

Reputation: 35

Storing a object with localStorage

I can't seem to find a way for localStorage to record the clicks variable when I refresh the browser.

I've tried using JSON.stringify and JSON.parse, but then found out about parseInt, which seems a better alternative (I'm just trying to store a number).

I'm brand new to programming and all the examples I checked were pure javascript, too complicated/poorly explained or outdated. Hope you can help me out. I've been trying to solve this issue for over a week.

Some more info: I'm using Phaser 2.5.0 with MAMP. Google Chrome v49.0.2623.112 (64-bit), OS X 10.8.5.

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });

var scoreText;
var clicks = 0;



function preload() {

    game.load.image('clickBox', 'assets/ClickMe.png');
    game.stage.backgroundColor = '#182d3b';
    game.stage.disableVisibilityChange = true; 
}


function create() {

    localStorage.setItem('clicks', parseInt('clicks'));
    localStorage.getItem('clicks');



    button = game.add.button(game.width/2, game.height/2, 'clickBox', upScoreText);


    scoreText = game.add.text(30, 30, "CLICKS: " + clicks, {font: "20px Arial", fill: "#ffffff", align: "left"});

    button.scale.x = 0.5;
    button.scale.y = 0.5;
    button.anchor.setTo(0.5);
    button.inputEnabled = true;
}


function update () {

            scoreText.setText("CLICKS: " + clicks);        
}


function upScoreText () {

    	clicks++;
}

Upvotes: 0

Views: 303

Answers (2)

trincot
trincot

Reputation: 350770

You should not store the literal clicks, but the variable with that name. Also there is no sense in calling parseInt on clicks, since it already is a number. Moreover, localStorage stores everything as a string, so whatever you do, it will end up being stored as a string anyway.

Storing:

localStorage.setItem('clicks', clicks); // is always stored as string

Reading:

clicks = +localStorage.getItem('clicks'); // `+` makes it a number

Now you have to put the above statements at the right place. It makes no sense to first write the value to storage and then read it out again: obviously the value will be the same after as before, and no advantage was taken from whatever was stored before you did this. You might as well skip those two lines then...

Instead you will want to read the value once, in the create function, and write the value whenever you change the it, i.e. in upScoreText:

function create() {
    // Load. If not exists in localStorage, use 0. 
    // If it does, cast to number with `+`:
    clicks = +localStorage.getItem('clicks') || 0;
    // etc...
}

function upScoreText () {
    clicks++;
    // Save:
    localStorage.setItem('clicks', clicks);
}

Now you'll have an ever incrementing clicks variable that survives a page reload, but you'll probably need to add a way to reset the value back to 0.

Upvotes: 1

Shrikantha Budya
Shrikantha Budya

Reputation: 644

Your using parseInt wrong i.e instead of

localStorage.setItem('clicks', parseInt('clicks'));

You should use

localStorage.setItem('clicks', parseInt(clicks));/*removed the quotes for the clicks*/

And i think ypu should check first whether the clicks variable exists in localStorage and then assign the variable clicks,but this is just a suggestion.you can implement it like this:-

var clicks=localStorage.getItem("clicks")||0;

not sure if you wanted this though :/

Upvotes: 0

Related Questions