Saving an item using localStorage

Question

Saving an item using localStorage

I've been struggling to figure out how to make localStorage save the clicks variable even after refreshing the browser.

Initially, I attempted using JSON.stringify and JSON.parse but later discovered that using parseInt could be a more suitable option since I only need to store a number.

As someone new to programming, I found most examples to be either too complex, poorly explained, or outdated. Hopefully, you can provide some guidance as I've been trying to resolve this issue for over a week now.

For context, I'm working with Phaser 2.5.0 on MAMP with Google Chrome v49.0.2623.112 (64-bit) on 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++;
}

javascript local-storage phaser-framework

Answer 1

Answer №1

It is recommended not to store the literal clicks, but rather to store the variable with that name. Additionally, there is no need to use parseInt on clicks, as it is already a number. Keep in mind that localStorage stores everything as a string, so regardless of what you do, it will ultimately be stored as a string.

When storing:

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

When reading:

clicks = +localStorage.getItem('clicks'); // `+` converts it back to a number

It's important to place these statements correctly. Writing a value to storage and immediately reading it back out serves no purpose since the value remains unchanged. It would be more efficient to skip those two lines...

Instead, read the value once in the create function, and update the value whenever it changes, such as in the upScoreText function:

function create() {
    // Load. If the value doesn't exist in localStorage, set it to 0. 
    // Otherwise, convert it to a number using `+`:
    clicks = +localStorage.getItem('clicks') || 0;
    // etc...
}

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

By following this approach, you'll maintain an incrementing clicks variable that persists through page reloads. However, you may want to include a method to reset the value back to 0 when needed.

Answer 2

It is recommended not to store the literal clicks, but rather to store the variable with that name. Additionally, there is no need to use parseInt on clicks, as it is already a number. Keep in mind that localStorage stores everything as a string, so regardless of what you do, it will ultimately be stored as a string.

When storing:

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

When reading:

clicks = +localStorage.getItem('clicks'); // `+` converts it back to a number

It's important to place these statements correctly. Writing a value to storage and immediately reading it back out serves no purpose since the value remains unchanged. It would be more efficient to skip those two lines...

Instead, read the value once in the create function, and update the value whenever it changes, such as in the upScoreText function:

function create() {
    // Load. If the value doesn't exist in localStorage, set it to 0. 
    // Otherwise, convert it to a number using `+`:
    clicks = +localStorage.getItem('clicks') || 0;
    // etc...
}

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

By following this approach, you'll maintain an incrementing clicks variable that persists through page reloads. However, you may want to include a method to reset the value back to 0 when needed.

Answer 3

Answer №2

You are using parseInt incorrectly, for example instead of

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

You should use

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

I also suggest checking if the clicks variable exists in localStorage before assigning it to a variable. You can implement it like this:

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

Not sure if this is what you were looking for though :/

Answer 4

You are using parseInt incorrectly, for example instead of

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

You should use

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

I also suggest checking if the clicks variable exists in localStorage before assigning it to a variable. You can implement it like this:

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

Not sure if this is what you were looking for though :/

Saving an item using localStorage

Answer №1

Answer №2

Similar questions

Tips on disregarding events within an html table

Retrieve recently appended DOM elements following the invocation of createComponent on a ViewContainerRef

Initiate a fresh start with an automatic input reset

Selecting properties from a GeoJSON object on the fly with Leaflet

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

Pop-up windows, the modern day digital version of fortune cookies

What is the best way to create a universal variable that can be accessed across all routes in an Express/

Tips for retrieving multiple data outputs from an ajax success function

Listener document.addEventListener (function() {perform the function as shown in the illustration})

Having an excess of 32 individual byte values

Preventing Jquery Append from Adding Previous Elements

How can you switch the display between two different class names using JavaScript?

Priority is given to strings over numbers

How to best handle dispatching two async thunk actions in Redux Toolkit when using TypeScript?

What is the best way to generate a new object within a function and then return it

Utilizing Node.js and Express.js to Parse HTML Form Inputs

Using Javascript, delete all chosen HTML elements containing innerText

Ways to verify the element prior to the completion of the request?

Identifying edited files within the node_modules directory: A comprehensive guide

A guide on incorporating router links within a list component in a React project