How can I save a value in JavaScript once the page has finished loading?

Question

How can I save a value in JavaScript once the page has finished loading?

$("#divid1").click(function(){
    $("#divid1").hide(); //this should remain hidden even after refreshing the page
    $("#hideid1").hide(); //this should remain hidden even after refreshing the page
    $("#id1").show(); //this should remain visible even after refreshing the page
});

.hide{
    display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/img/done.png"  id="divid1" alt="divid1"/>
<img src="/img/schedule.png" height="12" width="12" id="hideid1" alt="hideid1" />
<div id="id1" class="hide"><img src="/img/done.png" height="12" width="12" alt="id1" /></div>

My goal is to display an image after the page loads, and when clicking on it, show a new image while hiding the old one. However, this setup resets upon refreshing the page.

I would greatly appreciate a solution to maintain the desired behavior even after page refresh.

An implementation using my specific IDs would be most helpful! Thank you!

javascript jquery html css cookies

Answer 1

Answer №1

Utilize localStorage.

Add item

localStorage.setItem('selectedId', 100);

Retrieve item

localStorage.getItem('selectedId');

Delete item

localStorage.removeItem("selectedId");

Illustration

$(document).ready(function(){
    //Function for events
    function dummyFunction(){
        $("#divid1").hide(); //keep hidden after page refresh
        $("#hideid1").hide(); //keep hidden after page refresh
        $("#id1").show(); //keep showing after page refresh
    }
    //Check localStorage value
    if(localStorage.setItem('itemClicked') == 1)
    {
       dummyFunction();
    }
    //Div click event
    $("#divid1").click(function(){
        dummyFunction();
        //Set localStorage
        localStorage.setItem('itemClicked', 1);
    });
});

Answer 2

Utilize localStorage.

Add item

localStorage.setItem('selectedId', 100);

Retrieve item

localStorage.getItem('selectedId');

Delete item

localStorage.removeItem("selectedId");

Illustration

$(document).ready(function(){
    //Function for events
    function dummyFunction(){
        $("#divid1").hide(); //keep hidden after page refresh
        $("#hideid1").hide(); //keep hidden after page refresh
        $("#id1").show(); //keep showing after page refresh
    }
    //Check localStorage value
    if(localStorage.setItem('itemClicked') == 1)
    {
       dummyFunction();
    }
    //Div click event
    $("#divid1").click(function(){
        dummyFunction();
        //Set localStorage
        localStorage.setItem('itemClicked', 1);
    });
});

Answer 3

Answer №2

Take a look at the Example. This demonstration should provide clarity.

Javascript

$("#divid1").click(function(){
   $("#divid1").hide(); //aiming for sustained concealment after page refresh
   $("#hideid1").hide(); //intending for lasting concealment after page refresh
   $("#id1").show(); //desiring continuous visibility after page refresh
   localStorage.setItem('hidden', true);
});

$(function() {
   // if hidden attribute in localStorage is set to true, apply hiding and showing logic
   if(localStorage.getItem('hidden')){
     $("#divid1").hide(); 
     $("#hideid1").hide(); 
     $("#id1").show();
   }
});

Answer 4

Take a look at the Example. This demonstration should provide clarity.

Javascript

$("#divid1").click(function(){
   $("#divid1").hide(); //aiming for sustained concealment after page refresh
   $("#hideid1").hide(); //intending for lasting concealment after page refresh
   $("#id1").show(); //desiring continuous visibility after page refresh
   localStorage.setItem('hidden', true);
});

$(function() {
   // if hidden attribute in localStorage is set to true, apply hiding and showing logic
   if(localStorage.getItem('hidden')){
     $("#divid1").hide(); 
     $("#hideid1").hide(); 
     $("#id1").show();
   }
});

Answer 5

Answer №3

One solution is to utilize cookies to trigger the same action as if the user manually clicked on page load.

Unfortunately, aside from that workaround, there aren't many options available. The page refresh serves to reset the JavaScript functionality of a webpage.

Answer 6

One solution is to utilize cookies to trigger the same action as if the user manually clicked on page load.

Unfortunately, aside from that workaround, there aren't many options available. The page refresh serves to reset the JavaScript functionality of a webpage.

Answer 7

Answer №4

If you're facing an issue, this code snippet might be just what you need. Simply add it to the load event and watch your problem disappear.

$(window).load(function(){
    $("#divid1").hide(); 
    $("#hideid1").hide();
    $("#id1").show(); 
});

.hide{
    display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/img/done.png"  id="divid1" alt="divid1"/>
<img src="/img/schedule.png" height="12" width="12" id="hideid1" alt="hideid1" />
<div id="id1" class="hide"><img src="/img/done.png" height="12" width="12" alt="id1" /></div>

Answer 8

If you're facing an issue, this code snippet might be just what you need. Simply add it to the load event and watch your problem disappear.

$(window).load(function(){
    $("#divid1").hide(); 
    $("#hideid1").hide();
    $("#id1").show(); 
});

.hide{
    display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/img/done.png"  id="divid1" alt="divid1"/>
<img src="/img/schedule.png" height="12" width="12" id="hideid1" alt="hideid1" />
<div id="id1" class="hide"><img src="/img/done.png" height="12" width="12" alt="id1" /></div>

How can I save a value in JavaScript once the page has finished loading?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can someone guide me on the process of adding a personalized emoji to my discord bot?

Struggling to change the div content with ajax response transmitted through php

Is there a way to trigger a function upon the loading of a template in Angular 2?

Is there a way to bypass the default layout on app router in Next.js and implement our own custom page layout

Ways to keep the position of an expanded collapsible table from Material UI intact

The "apply" function in Javascript cannot be found in the window.external extension object

Trouble with firing the click event using document.createElement('a') in Firefox

Tips for displaying an image larger than its container using CSS or Bootstrap

Creating dynamically generated nested text inputs with individual v-model bindings upon the clicking of a button

Looking for assistance in determining a solution for progress bar implementation

The addition of an asynchronous call caused Array.map to start experiencing errors

How can I ensure that the state is only updated after the map function has finished executing in React?

Accessing a JBoss Web Service using JavaScript (AJAX) - A Comprehensive Guide

What is the best method for encoding non-ASCII characters in JSON.stringify as ASCII-safe escaped characters (uXXXX) without the need for additional post-processing?

Create a one-page website that utilizes the jQuery load() function

Begin highlighting the columns in the table with color starting from the Nth column onwards using the td

What is the best way to ensure uniform height and width of images within a thumbnail in Bootstrap?

Mastering CSS: Optimizing Div Placement Across Sections

How can I retrieve and process a text or .csv file that has been uploaded using Multer?

App.post is returning a set of empty curly braces as the response