持久更改为会话的CSS

Question

I have a div (1) with display:block, another div (2) with display:none and a third div also with display:none.

On each click or form submit I want to change the second div's display to block and the first's to none.

Though this can be done with Javascript, I want this change of CSS to stick for the particular session. How can I attain just that?

Answer 1

One (albeit hacky) way to do this using only client side storage is SessionStorage. You could store some value in there, and based on that value set the visibility of the div on page load.

/* When the user clicks the form */
sessionStorage.setItem("myValue", "showDiv2");

...    

/* When the page is loaded */
if (sessionStorage.getItem("myValue") === "showDiv2") {
    $('#div2').show();
    $('#div1').hide();
} else {
    $('#div1').show();
    $('#div2').hide();
}

There is no way to persistently alter the css source, you can only make modifications to it with javascript after the dom has loaded.