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

Determine the current iteration index within recurring tasks using BullJS

I've been encountering a recurring issue of receiving NaN followed by a number in React. Any suggestions on how to resolve

Retrieving checkbox data and transmitting it without using a form submission

What are the steps to establish a Z-axis coordinate system in three.js?

Changing a class using JavaScript: Adding and removing class dynamics

"Vue is failing to actively update an input that relies on changes from another

Can we modify the styling of elements in Angular based on an object property?

Parsing improperly formatted JSON from an HTTP GET request can be done using either AngularJS or JQuery

Prisma encountered an error with the database string: Invalid MongoDB connection string

What is the best way to determine if a child div exists within a parent div?

What is the best way to include arrays in VueJS?

Assign a title property in Vuejs only if the returned data from binding evaluates to true

A method to use jQuery to replace newlines with commas in user input

How can I transfer a collection of JSON objects from JavaScript to C#?

Placing a moveable object in a designated spot for dropping at the desired location

Undefined Response Error when Utilizing Dropzone for File Upload in Express

Learn how to create a logarithmic scale graph using CanvasJS by fetching data from an AJAX call

Experiencing issues with connecting to jQuery in an external JavaScript file

Create a stylish navigation dropdown with MaterializeCSS

Global asynchronous functionality can be enabled in JavaScript