Colapse Menu after page refresh with localStorage

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 in this link .

When you click the menu, the menu is reduced and so remains after the refresh page. When you click the button again the menu returns to the original state and stays the same when the page is updated.

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

    
asked by anonymous 16.04.2014 / 23:34

1 answer

9

There are a few ways you can do this I will mention 2 that come in mind and are fairly simple methods.

HTML5 API LOCAL STORAGE

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

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

Here you can see some examples of API and bucket sharing.

Cookies

Nothing like our good and famous cookie. I noticed that you are familiar with jQuery then I believe that 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 is your repository and all documentation.

In case you want to see this information stored in the browser open the developer tool in Chrome (Menu-> Developer Tools-> Tools or press F12) click on the Resources tab, there you can navigate in different browser storage features and view that domain stored information.

    
17.04.2014 / 01:36