store value in javascript after page load?

Question

$("#divid1").click(function(){
    $("#divid1").hide(); //want this to keep hidden after refresh
    $("#hideid1").hide(); //want this to keep hidden after refresh
    $("#id1").show(); //want this to keep showing after refresh
});

.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>

i am trying to show image after page load, when onclick(); show new image and hide old image. but, on page refresh it resets.

kindly give me a way to solve it.

Working code with my ids in it will be appreciated!!

http://stackoverflow.com/questions/16206322/how-to-get-js-variable-to-retain-value-after-page-refresh — epascarello, Sep 27 '16 at 17:40
Possible duplicate of [Global Variable usage on page reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload) — JJJ, Sep 27 '16 at 17:50

Mohit Tanwani · Answer 1 · 2016-09-27T18:09:10.933

1

Try localStorage.

Set item

localStorage.setItem('selectedId', 100);

Get item

localStorage.getItem('selectedId');

Finally, Remove item

localStorage.removeItem("selectedId");

Example

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

edited Sep 27 '16 at 18:09

answered Sep 27 '16 at 17:39

Mohit Tanwani

6,608
2
14
32

provide me how to make it happen in coding – monemacu Sep 27 '16 at 17:41
I've updated my answer, check that how to use localStorage. And let me know if you still finds any problem. – Mohit Tanwani Sep 27 '16 at 17:49
1

move the repeated code to a method so it is cleaner. And you probably want to state the code needs to live at the bottom of the body or use document ready – epascarello Sep 27 '16 at 17:53
ohh I see, @monemacu my answer was first on the board, still you choose the other one's, Not fair job man. – Mohit Tanwani Sep 27 '16 at 18:03
@monemacu No issues man, I am glad if my answer helped you. I am here to help only, +rewards are the plus points :) That always encourage the particular to help more and more... – Mohit Tanwani Sep 27 '16 at 18:12

Mihailo · Accepted Answer · 2016-09-27T17:56:16.683

0

Check out the Example. This should make it clear enough.

JS

$("#divid1").click(function(){
   $("#divid1").hide(); //want this to keep hidden after refresh
   $("#hideid1").hide(); //want this to keep hidden after refresh
   $("#id1").show(); //want this to keep showing after refresh
   localStorage.setItem('hidden', true);
});

$(function() {
   // if localStorage has hidden as true, hide the div and show other
   if(localStorage.getItem('hidden')){
     $("#divid1").hide(); 
     $("#hideid1").hide(); 
     $("#id1").show();
   }
});

edited Sep 27 '16 at 17:56

answered Sep 27 '16 at 17:48

Mihailo

4,736
4
22
30

thanx so mch worked like a charm.. also how to reset the storage.. in example clearstorage is not working! – monemacu Sep 27 '16 at 18:01
No problem, it's always a pleasure to help :] Hmmm, strange it's working for me. If you reload without clicking it, the div is hidden, but when you click the button (clear the storage) and reload the div should be back. – Mihailo Sep 27 '16 at 18:03
1

@monemacu You can use `localStorage.removeItem("name of localStorage variable you want to remove");` to remove from localStorage. – Mohit Tanwani Sep 27 '16 at 18:05
+1 @Loading.. Yes, I forgot to mention, with `localStorage.clear()` you clear the **WHOLE** localStorage which sometimes you might not want to do. In that case use `removeItem()` instead. – Mihailo Sep 27 '16 at 18:07
yea it worked in example, but not working on my localhost! Code worked like charm tho, only clear local storage is having issue – monemacu Sep 27 '16 at 18:08
Your browser should be HTML5 supported. – Mohit Tanwani Sep 27 '16 at 18:10
@monemacu For few seconds, you might changed your mind :D – Mohit Tanwani Sep 27 '16 at 18:13
PS: i am new to stackflow, so was testing the accept answer button lol :D i never changed my mind :P – monemacu Sep 27 '16 at 18:18
@monemacu No issues man, keep testing it and learn new things but just be fair enough, if you fair with world, world will be fair to you :) – Mohit Tanwani Sep 27 '16 at 18:22
@monemacu yeah what Loading said, don't worry about the negative guys you'll come across here. But always try to do your research before posting a question, so we can keep the forum clean. :] – Mihailo Sep 27 '16 at 18:24

score -1 · Answer 3 · answered Sep 27 '16 at 17:40

-1

You could use cookies to call the same as if the user clicked on page load.

Other than that, you're kinda outta luck. The page refresh is meant to reset the javascript of a page.

answered Sep 27 '16 at 17:40

Matthew

378
2
7

score -1 · Answer 4 · answered Sep 27 '16 at 17:51

I hope following code will help you. Just put the code in load event and problem solve.

$(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>

store value in javascript after page load?

4 Answers4