show display:none div after refresh

Question

Don\'t know how to put the question title correctly! I have a div that is displayed by button click. The problem is that if user goes to next page(by clicking another button

Answer 1

You can use the html5 webStorage for this:

localStorage does not expire, whereas sessionStorage gets deleted when the browser is closed (usage of both is equivalent). The webStorage is support by all major browsers and IE >= 8

Plain Javascript

function showTable() {
   document.getElementById('tableDiv').style.display = "block";
   localStorage.setItem('show', 'true'); //store state in localStorage
}

And check the state onLoad:

window.onload = function() {
    var show = localStorage.getItem('show');
    if(show === 'true'){
         document.getElementById('tableDiv').style.display = "block";
    }
}

jQuery

function showTable() {
    $('#tableDiv').show();
    localStorage.setItem('show', 'true'); //store state in localStorage
}

$(document).ready(function(){
    var show = localStorage.getItem('show');
    if(show === 'true'){
        $('#tableDiv').show();
    }
});

Demo

P.S. To remove an item from the localStorage use

localStorage.removeItem('show');

Reference

webStorage