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

**Iconic_creator** · Oct 10, 2012 07:13

Hello everyone!

I have this piece of JQuery:

Code:

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

HTML Code:

<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

**Pullo** · Oct 10, 2012 09:44

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:

HTML 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/1...tabs-in-jquery

**Iconic_creator** · Oct 10, 2012 21:44

Originally Posted by Pullo

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:

HTML 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/1...tabs-in-jquery

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

**Pullo** · Oct 10, 2012 23:54

Morning IC,

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

Originally Posted by Iconic_creator

Thanks for the response, this seem to work but it is not storing the action.

What action? Have I missed something?

Originally Posted by Iconic_creator

When I refresh the page I lose the previous state.

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?

Originally Posted by Iconic_creator

And when I click the first tab, I don't go back to default.

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.

**Iconic_creator** · Oct 11, 2012 10:40

Originally Posted by Pullo

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.

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

**Iconic_creator** · Oct 11, 2012 14:30

Originally Posted by Pullo

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.

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

**Pullo** · Oct 11, 2012 14:43

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.

**Iconic_creator** · Oct 11, 2012 15:01

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?

**Pullo** · Oct 12, 2012 00:18

Originally Posted by Iconic_creator

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?

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:

Code JavaScript:

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

HTH

User Tag List

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

Thread Tools

Display

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

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions