CODEWITHSUNDEEP
javascriptjqueryshow-hide
Tom Prats
Tom Prats

Reputation: 7921

How to save state after Display: none? Prevent reset after page reload

Essentially I use display: none by default on one element and then use javascript to switch the hidden element to another one after a different heading is clicked. Right now my implementation works perfectly.

The only problem is that when you reload the page, it goes back to the default, instead of keeping it as it was.

What's happening in this code is I bind the header of the element that is hidden with the function hideUnhide. When it get's clicked I hide the current element, show the previously hidden one, and then set the css for the headers to make the hidden one look like a link and the displayed one to look like a header.

$(document).ready(function() {
    var unclicked = $('.unclickedTeam');
    unclicked.bind("click", hideUnhide);
});

function hideUnhide() {
    var unclicked = $('.unclickedTeam');
    var clicked = $('.currentTeam');
    var displayedTeam = $('.displayedTeam');
    var hiddenTeam = $('.hiddenTeam');

    displayedTeam.css('display', 'none');
    hiddenTeam.css('display', 'block');

    displayedTeam.addClass('hiddenTeam');
    displayedTeam.removeClass('displayedTeam');

    hiddenTeam.addClass('displayedTeam');
    hiddenTeam.removeClass('hiddenTeam');

    unclicked.addClass('currentTeam');
    unclicked.removeClass('unclickedTeam');

    clicked.addClass('unclickedTeam');
    clicked.removeClass('currentTeam');

    unclicked.unbind();
    clicked.bind("click", hideUnhide);
}

How can I save the state like it is? Aside from making them two separate pages that jump to each other when a header is clicked.

Upvotes: 0

Views: 1495

Answers (2)

fnkr
fnkr

Reputation: 10075

You can use localStorage to store the previous state.

localStorage.setItem("hide", "yes"); // Set state

if(localStorage.getItem("hide") == "yes") {
    alert('...'); // Do something if "hide" is set
}

LocalStorage is compatible with the most browsers. See: http://www.html5rocks.com/de/features/storage

Browser compatibility WebStorage

If you want to be sure you can also use Cookies and JavaScript.
You can use this JS-functions to create/delete cookies:

function setCookie(name,value,mins) {
    var expires = "";
    if (mins) {
        var date = new Date();
        date.setTime(date.getTime()+(mins*60*1000));
        expires = "; expires="+date.toGMTString();
    }
    else expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

And here is a sample how to do with JavaScript:

setCookie("hide", "yes", 43200); // Set state (expire in 30 days)

if(getCookie("hide") == "yes") {
    alert('...'); // Do something if "hide" is set
}

Tested both, working.

Upvotes: 3

Sirko
Sirko

Reputation: 74076

You can use localStorage to save state of your page, e.g., like this

window.localStorage.setItem( 'stateTeam1', 'hidden' );

Your code overall would need two additions:

  1. Within the hideUnhide method, you would need to update the entry in localStorage.
  2. On pageload you would have to extract the state from localStorage and apply properties set.

Browser support is very good, as can be seen at caniuse.

Upvotes: 1

Related Questions