Collapse Menu after page refresh with localStorage

Asked

Viewed 348 times

8

How can I close a menu and keep it closed after the refresh of the page using jQuery only? It would be something like at this link.

By clicking the button colapse the menu is reduced and remains so even after the refresh on the page. By clicking the button again the menu goes back to its original state and stays the same when the page is updated.

How can I simulate this effect without PHP? Or I would have to use a Session or a cookie?

jquery html session cookies localstorage

1 answer

9


There are a few ways you can do this I will quote 2 that come into mind and are very simple methods.

HTML5 LOCAL STORAGE API

You can access the object localStorage and work with their methods setItem and getItem example:

localStorage.setItem("menu","visible");
localStorage.getItem("menu");

Here you can see some examples of the API and compartmentability.

Cookies

Nothing like our good, famous cookie. I noticed you’re familiar with jQuery then I believe this jQuery plugin will help you a lot is the jquery.cookie Example:

$.cookie('menu', 'visible'); //setando o valor visible para o cookie menu
$.cookie('menu') // lendo o cookie menu

Here this repository and all the documentation.

If you want to see this information stored in browse open the developer tool on Chrome(Menu->Tools->Developer tools or press F12) click on the tab Resources, there you can browse different browser storage resources and see the stored information of that domain.

  • 1

    Dude, really good, thanks d+. This HTML5 is ball show.

Browser other questions tagged jquery html session cookies localstorage

You are not signed in. Login or sign up in order to post.