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