What is the best way to automatically show the latest localStorage data when a page is reloaded

There are two main goals I want to achieve with this section:

  1. I aim to show the updated high score each time the page is refreshed.
  2. Currently, the high score resets to 0 whenever the page is reloaded because of
    localStorage.setItem('high_score', 0);
    . I am uncertain about how to set it properly without resetting it back to 0 every single time the page reloads.
        let score = 0;
        var high_score = 0;
        localStorage.setItem('high_score', 0);

        document.getElementById('high_score').innerHTML="HIGH<br>SCORE:<br>" + 
        localStorage['high_score'];

        if (score > parseInt(localStorage.getItem('high_score'), 10)) {
            localStorage.setItem('high_score', score);
        }

Answer №1

To ensure the storage item is only set when necessary updates are needed, follow this code snippet:

// Assuming that scores cannot be negative
const newHighestScore = Math.max(localStorage.highest_score, score);
localStorage.highest_score = newHighestScore;

When retrieving the storage value, make sure to check for an alternate value of 0:

document.getElementById('highest_score').innerHTML="HIGHEST<br>SCORE:<br>" + 
        (localStorage.highest_score || 0)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to conceal the jqgrid thumbnail

I have a jqgrid that displays a large amount of dynamic data. I am looking for a way to hide the thumb of the vertical scrollbar in the jqgrid when scrolling using the mousewheel. Here is a basic example: var data = [ [48803, "DSK1", "", "02200220", "O ...

Is it recommended to utilize a "default" key within an object?

Creating a JavaScript application and looking to establish a config object. Here's what I have so far: var config = { localization: { locales: ['en', ..., 'de'], defaultLocale: 'en' } } Consideri ...

Exploring the World of 3D Rotation with Three.js

I currently have 2 mesh objects - the Anchor and the Rod. The Anchor rotates around the z-axis, as shown in the image. The Rod is designed to only move backward and forwards. You can view the image here: . However, I am struggling to determine the matrix ...

Utilizing a personalized service within an extended RouterOutlet component in Angular 2 for streamlined authentication

In my quest to establish authentication in Angular 2, I turned to an insightful article (as well as a previous inquiry on SO) where I learned how to create a custom extended RouterOutlet: export class LoggedInRouterOutlet extends RouterOutlet { public ...

Tips for emphasizing the currently pressed button element when clicked in Angular 2?

Here is the code snippet I am currently working with: <button *ngFor="let group of groupsList" attr.data-index="{{ group.index }}" (click)="processGroups(group.index)">{{ group.title }}</button> I am trying to figure out if it is possible to ...

Retrieve image data in its original format using AJAX

Currently, I am working on integrating Facebook with a website and I encountered a specific call in the Facebook API that posts a picture to a user's account. One of the parameters required is the raw image data. The image is stored locally on the web ...

iOS displaying CSS Transform issue exclusively

Creating a website that is fully mobile responsive is my goal. However, after designing the header, I realized that it wasn't displaying correctly on IOS devices like my iPad. The "Transform: translateX(-100%);" statement was functional on Android pho ...

Tips for utilizing the Toggle Slider JS functionality

I'm attempting to change a value using a slider in HTML, here is my approach: html file : <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script scr="./scripts.js" ...

Error encountered during Ajax request - two files being transmitted instead of one

Can someone assist me with a basic ajax call for a login button? I need help with the form submission and sending the request to a php file to handle the login action. However, I am encountering an issue where two files are being sent instead of one when ...

Impose a delay between the execution of two functions in React.js

Looking for a way to introduce a forced delay between two consecutive function calls. Essentially, what I want to achieve is: a // call func a delay(100) // pause for 100 ms b // call func b Is there a method to accomplish this? Update: attempted a() ...

Is there a single code that can transform all standard forms into AJAX forms effortlessly?

When manipulating my 'login' form, I love using this code to submit it to the specified url and display the response in the designated id. The method of submission is defined as well. It's a great solution, but is there a way to streamline ...

Unable to use $.parseJSON() on a string containing src="" or id="" attributes

When looking at the code snippet below, I am able to use the $.parseJSON() method: var myString = '{ "Header": "<p>some content</p>"}'; var modelJsonObject = $.parseJSON(myString); However, I encounter an issue when the value of "He ...

Error encountered in Express Router middleware (`app.use() function must be provided with a middleware function`)

I've seen plenty of similar questions on this topic, but after reviewing them all, I still haven't found a solution. My current dilemma involves creating an app using Express Router, however I keep encountering the following error: app.use() re ...

What causes images to expand automatically when selected in my JavaScript gallery?

I am struggling with a simple JS gallery of images where I want to display a large image at the top and small thumbnails below it. The issue I am facing is that when I hover over an image in the thumbnail section, the big image changes as expected. However ...

generate an array using JavaScript and Html.action

I'm struggling with creating an array of strings in JavaScript using a function within my MVC controller. The current approach is not yielding the desired results, and I'm unsure of the necessary steps to rectify this issue. Below, you'll fi ...

Having difficulties testing the functionality of redux-form

I am struggling with testing react components that use redux-form. My integration tests are failing, indicating that I have not set up the tests correctly. There seems to be a consensus in discussions on this issue, both here and on GitHub. Any assistance ...

Updating Angular UI-Router to version 1.0 causes issues with resolving data inside views

After upgrading my Angular UI-Router to version 1.0, I came across an interesting statement in the migration guide: We no longer process resolve blocks that are declared inside a views While it makes sense to move all resolve blocks to the parent state ...

When using @click as a link, it results in an

I'm attempting to create a clickable row in a datatable that functions as a link. Placing a standard <nuxt-link> within a <td> works fine, but wrapping the entire <tr> disrupts the table layout. Next, I tried using @click with a met ...

Unable to delete a row from a dynamically generated table using jQuery

I am currently working on a project that involves creating a table based on results from a servlet. The table includes checkboxes, and when a checkbox is checked, a button at the bottom of the table should appear. This button calls a remove function to del ...

Whenever I try to execute the command `electron .` in the electron-quickstart project, I immediately encounter an error within the

Upon successfully installing Electron, I attempted to run it using "electron" or "electron -v" commands. Unfortunately, I encountered an error while running it on Windows 10. C:\Windows\System32\electron-quick-start>electron -v modu ...