Tips for avoiding a button reverting to its original state upon page refresh

Question

Tips for avoiding a button reverting to its original state upon page refresh

I have a button with the ID #first that, when clicked, is replaced by another button with the ID #second. However, if I refresh the page after clicking on the second button, it goes back to displaying the first button. Is there a way to make sure that the second button remains displayed even after a page refresh?

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("button").click(function() {
          $("#first").replaceWith('<button id="second">Second Button</button>');
        });
      });
    </script>
  </head>
  <body>
    <button id="first">First Button</button>
  </body>
</html>

javascript jquery html refresh

Answer 1

Answer №1

Create a persistent cookie to remember the status of the button, then retrieve and display this saved state when the document is ready.

Answer 2

Create a persistent cookie to remember the status of the button, then retrieve and display this saved state when the document is ready.

Answer 3

Answer №2

Utilize local storage and retrieve the button state upon window load.

For a demonstration, refer to : http://www.w3schools.com/html/html5_webstorage.asp

// Save
localStorage.setItem("lastname", "Smith");
// Get
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

You can modify this as follows :

      // Save
      localStorage.setItem("buttonState", "Second");
      // Get
      var buttonState = localStorage.getItem("buttonState");

In your scenario :

      var buttonState = localStorage.getItem("buttonState");   
      $(document).ready(function() { //when the document is ready
        if(buttonState){ //check if buttonState exists
            if(buttonState === 'Second'){ //if button state is second
              //logic to switch to the second state
              $("#first").replaceWith('<button id="second">Second Button</button>');
            }
    }
        $("button").click(function() {
          $("#first").replaceWith('<button id="second">Second Button</button>');
          localStorage.setItem("buttonState", "Second");
        });
        }

In your example, when changing the state to second, save the state as shown (setItem) and then fetch it upon document ready or window load.

Here is an example fiddle demonstrating its functionality: https://jsfiddle.net/wg7xL4sa/2/

Please note that I have commented out the localStorage.clear(). This can be used to clear your local storage if needed.

Answer 4

Utilize local storage and retrieve the button state upon window load.

For a demonstration, refer to : http://www.w3schools.com/html/html5_webstorage.asp

// Save
localStorage.setItem("lastname", "Smith");
// Get
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

You can modify this as follows :

      // Save
      localStorage.setItem("buttonState", "Second");
      // Get
      var buttonState = localStorage.getItem("buttonState");

In your scenario :

      var buttonState = localStorage.getItem("buttonState");   
      $(document).ready(function() { //when the document is ready
        if(buttonState){ //check if buttonState exists
            if(buttonState === 'Second'){ //if button state is second
              //logic to switch to the second state
              $("#first").replaceWith('<button id="second">Second Button</button>');
            }
    }
        $("button").click(function() {
          $("#first").replaceWith('<button id="second">Second Button</button>');
          localStorage.setItem("buttonState", "Second");
        });
        }

In your example, when changing the state to second, save the state as shown (setItem) and then fetch it upon document ready or window load.

Here is an example fiddle demonstrating its functionality: https://jsfiddle.net/wg7xL4sa/2/

Please note that I have commented out the localStorage.clear(). This can be used to clear your local storage if needed.

Tips for avoiding a button reverting to its original state upon page refresh

Answer №1

Answer №2

Similar questions

Issues with Angular route links not functioning correctly when using an Array of objects

Playing out the REST endpoint in ExpressJS simulation

Tips for gathering all links from a JSON object

Even though the Spotify API JSON response may be undefined, I am still able to log it using console.log()

What could be the reason behind my inability to initiate this PHP file through jQuery/AJAX?

Navigating through tabs in a Meteor application: How to maintain the active tab when using the back button

Tips for implementing personalized command buttons in Kendo Grid with AJAX request utilizing JavaScript

Unable to perform updates for personalized fonts

the click event fails to trigger when the id or class is modified

skip every nth element in the array based on the specified value

Tips on extracting the image URL after uploading via Google Picker

Elements that are positioned in a single line in a text

Automatically organize <mat-list-item> elements within a <mat-list> container

"Exploring the power of Ajax: a guide to automatically refreshing the response every

The functionality of a custom control's jQuery code is not functioning properly following a postback

Show all entries belonging to a specific ID on individual rows for each ID using PHP

What is the best way to modify the state of a nested component?

Switch up image transitions using Javascript

How can I utilize jQuery to iterate through every anchor tag on an HTML page?

The collapse component from bootstrap is not visible due to an overlapping button