Using Cookies to make action stay on browser refresh or closed/Re-open

JavaScript
1

Hello everyone!

I have this piece of JQuery:


<script type="text/javascript">

$(document).ready(function() {

$('#tab1').on('click',function(){

    $('ol li span').removeClass(function() {

          return $(this).attr('class');

        }).addClass('default');

});

$('#tab2').click(function(){

    $('ol li span').removeClass(function() {

          return $(this).attr('class');

        }).addClass('style2');

});

$('#tab3').click(function(){

    $('ol li span').removeClass(function() {

          return $(this).attr('class');

        }).addClass('style3');

});

});

</script>

HTML:


<a id="tab1" href="#">Sample</a>
<a id="tab2" href="#">Sample</a>
<a id="tab3" href="#">Sample</a>

As you can see I simply need to apply a particular style to list in a span when a tab with the specific ID is clicked, the issue is Cookies which I do not eat often.
How do I make this stay? If the user selects/clicks a particular tab I would rather the style remain on refresh or browser close and if nothing is selected when the page is first visited than the default applies.

By the way I am using ID on the link (anchor) because it is doing something unrelated to this post.

I can find my way around applying a single style (default) but in this case there are different styles for each tab clicked.

This I do not know.

Thanks for reading my sob story.

IC

2

If you don’t mind not supporting IE 7, you could always use Local Storage. It’s new to HTML 5 and allows you simply to save key value pairs to the browsers local storage using JavaScript.
This website shows you what its supported on: http://caniuse.com/#search=localstorage

There are two options with local storage
Local storage - This is persisted beyond page refreshes
Session storage - This is persisted while the browser session is still active. When you close your browsers tab, the storage is lost.

Here is an example with your code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery persistence example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>

  <body>
    <ol><li><span>The mighty span</span></li></ol>
    <a id="tab1" href="#">Tab1</a>
    <a id="tab2" href="#">Tab2</a>
    <a id="tab3" href="#">Tab3</a>

    <script type="text/javascript">
      $(document).ready(function() {
        //Class to apply?
        var myClass = localStorage.getItem("myClass");
        $('ol li span').removeClass($(this).attr('class')).addClass(myClass);

        $('#tab1').on('click',function(){
          $('ol li span').removeClass($(this).attr('class')).addClass('default');
          localStorage.setItem("myClass", "default");
        });

        $('#tab2').click(function(){
          $('ol li span').removeClass($(this).attr('class')).addClass('style2');
          localStorage.setItem("myClass", "style2");
        });

        $('#tab3').click(function(){
          $('ol li span').removeClass($(this).attr('class')).addClass('style3');
          localStorage.setItem("myClass", "style3");
        });
      });
    </script>
  </body>
</html>

Ref: http://stackoverflow.com/questions/10845813/how-to-preserve-state-of-tabs-in-jquery

3

Thanks for the response, this seem to work but it is not storing the action.
When I refresh the page I lose the previous state. And when I click the first tab, I don’t go back to default.

But thanks for the input, I really appreciate it.

IC

4

Morning IC,

Glad I could help a bit, but I am a little confused by your response.

What action? Have I missed something?

This shouldn’t happen. Using the code I supplied, if I click on the link “Tab2”, then the span tag gets a class of “style2” applied to it.
If I refresh the browser then the span tag still has a class of “style2”. If I shut the browser and open it again, the span tag still has a class of “style2”.
This is what you wanted, right?
If this is different for you, then maybe it has something to do with browser compatibility or jQuery version? I’m using the latest version of Chrome in Win7 and the latest jQuery. What about you?

When I do everything described above, then click on the link “Tab1”, the span gets a class of “default”. This also survives a page refresh or shutting the browser.
Weird if this isn’t working for you.

If I have misunderstood any of your requirements or if I can help you debug this further, then just let me know.

5

Yes you wrote exactly what I was getting at:
I am using JQuery 1.7.2 and I understand that this does not work in IE7 which I do not mind.
I’ll change the JQuery Version and see what happens.

IC

6

Okay I have it working in Firefox 15.0.1 but it does not work in IE 9, I am not sure why.

I’ll post back shortly when I have access to a computer with all the other browsers.

Thanks again and I really appreciate your help.

IC

7

Hi there IC,

Are you running it locally?
If so, try uploading it to a remote server, then it should work as expected in IE9.

8

Okay let me try that.

Update: Now it is working but here is another issue and I hate to drag this along.
When the page uploads for the first time, the default style is not applied, should I add the default style on the HTML?
If a user visits the page for the first time, the default will apply and if they return later then the page starts where it left off.

Can I do that with this?

9

Not as the code currently stands.
When the page loads, the first thing that the script does is to get the last known class out of local storage and apply it to the span, in the process removing any class that is already there.

Change the first two line of the script to this. It will set “default” as the default style to apply:

var myClass = localStorage.getItem("myClass") || 'default';

HTH