Is there a way to use a button to delete items stored in localStorage?

I am trying to create a button that will clear the local storage for a user using localStorage.clear();, but it is not working as expected.

Unfortunately, if you check out the demo, you'll see that it doesn't work properly.

Here's the demo

JS code:

var money = 0;

//localStorage function

if(localStorage.money) money = localStorage.getItem('money');
document.getElementById("money").innerHTML = money;

//Clicking function

function moneyClick(number){
    money = parseInt(money) + 10;
    document.getElementById ("money").innerHTML = money;
    localStorage.setItem('money', money);
}

//Clear data function

function clearClick(number){
    localStorage.clear();
}

Answer №1

Although your code successfully clears the localStorage, you may not see this change reflected until you refresh the page. To improve clarity within your code, consider explicitly setting money to 0 and updating the DOM after clearing the localStorage:


function clearStorage(number){
    localStorage.clear();
    money = 0;
    document.getElementById("money").innerHTML = money;
}

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

adjust time in jQuery AJAX request when a button is clicked

I have the following code snippet that triggers when a button is clicked. When a user clicks on a button, I want to show a progress bar or waiting image in the browser for 5 seconds. How can I set a timeout and display the progress bar or waiting image wh ...

Error: The Gravatar service is unable to retrieve the property 'get' from an undefined source

I have a basic app with just one controller. I'm trying to debug the output of the Gravatar.get() function in the console. However, I encounter an error saying: "TypeError: Cannot read property 'get' of undefined". I'm confused because ...

Struggling to navigate web pages with Selenium using Java is proving to be a challenge

I am currently working on using Selenium's HtmlUnitDriver and WebElement classes in Java to automate clicking the "Download as CSV" button on Google Trends. The issue that I am encountering is that the button remains hidden until another settings men ...

What is the best way to eliminate the border on Material UI's DatePicker component?

Check out this code snippet for implementing a datepicker component: import React, { Fragment, useState } from "react"; import { KeyboardDatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers"; import DateFnsUtils from &qu ...

Troubleshooting TypeScript JSX Files: Tips and Tricks

When using tsx files (TypeScript JSX) in React, there are two transformations that take place: TypeScript JSX I have a feeling that debugging this step by step may not be possible because the JS interpreter might not know which lines in my tsx files are ...

Access various results from a jQuery function

Is there a way to efficiently extract the values of petKeys and employeeKey using the jQuery functions provided below? var whenSelectDateFromCalendar = function () { initKeyValues(); petKeys = ? employeeKey = ? }; var initKeyValues = function ...

Is the file corrupt using node.js?

Looking for ways to determine if a file is corrupted using node.js? I have attempted various File System methods, such as fs.readFile, fs.open, and fs.access, but all of them are showing an OK status. However, I am confident that my file is corrupted base ...

Removing the root component in ReactJS can be done on specific pages by implementing

Is there a way to remove the <header/> and <footer/> components from my signup.js and signin.js pages without altering the root index.js file? Presently, the root index.js file looks like this: class Template extends React.Component { render( ...

Is incorporating re-routing into an action a beneficial approach?

My main concern involves action design strategies: determining the best timing and method for invoking actions. In my project using Mantra (utilizing React for the front-end and Meteor's FlowRouter for routing), there is a UI component that includes ...

In the world of JavaScript and JQuery, there exists a concept similar to "require_once" that

I have created a JavaScript class, but I am encountering issues with making an Ajax request in the constructor function. I want the response from the Ajax request to populate my object's attributes, but it is not working as expected. Can someone help ...

Create a TypeScript class object with specified constructor arguments

I've been working on a function that is supposed to execute the init method of a class and then return an instance of that class. However, I'm running into issues with maintaining the constructor and class types. This is what I have tried so far ...

Prevent the display of cascading div elements by using JavaScript and jQuery scripting

My webpage performs a simple check to verify if Javascript and cookies are enabled on the client's browser. If they are enabled, the script displays the content inside div id="conteudo" and hides the warning message inside div id="aviso". If not, the ...

Loading modules conditionally in Nuxt.js

In my Nuxt.js configuration, I have included a module for Google Tag Manager like this: modules: [ [ '@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' } ] ] Everything is functioning properly, but I am curious ab ...

Steps for replacing a particular text value within a paragraph in a textbox

Seeking advice on how to change the content of specific text in a paragraph within a textbox. The target text is located on the 4th line and I am unsure how to pinpoint it for modification. Please note that utilizing clear() and sendkeys() methods is not ...

Passing the variable that contains the size of the table from JavaScript to PHP

Currently, I have a PHP page that consists of the following code: $sizelimit = "6"; include ('table.php'); This setup functions well by displaying the last 6 MySQL entries from my table generated by PHP on the main page and displays either the ...

Can you point me in the direction of the jQuery library link?

Can anyone assist me in locating the direct link to the jquery library for inclusion on my website? I have tried searching on the official website, but it doesn't seem to have the information I need or it's not clear enough. I only need the link ...

Getting state from two child components in React can be achieved by using props to pass the

In my tabbed modal dialog, I have two image list components rendering images based on props defined in the parent. Each component manages its own array of image objects. The challenge is that I need to update or delete these images using a single save butt ...

Encountered an expression when expecting an assignment or function call in the jsreact codebase, triggering the no-unused-ex

router.js code snippet import React from 'react'; import { Route } from 'react-router-dom'; import CommentList from './containers/commentview'; const BaseRouter = () =>{ return ( <div> <Route exact= ...

Tips for avoiding accidental unit conversion in jQuery

Imagine having the following code: var $element = $('<div/>'); $element.css("margin-left", "2cm"); console.log($element.css("margin-left")); When tested in Chrome, it doesn't return anything, but Firefox shows "75.5833px". Any sugges ...

The "Boostrap Confirmation" plugin in JQuery fails to appear upon the second click

After changing the confirmation method from an MVC Action to an Ajax method, I noticed that the confirmation box does not appear when clicking a second time. It seems to have stopped working possibly because the page is no longer being refreshed. How can ...