table show/hide remember the selection - php

Question

I am a beginner and used jscript in my php page to hide/show table using the following code:
<script type="text/javascript">
function setTable(what){
if(document.getElementById(what).style.display=="none"){
document.getElementById(what).style.display="block";
}
else if(document.getElementById(what).style.display=="block"){
document.getElementById(what).style.display="none";
}
}
</script>
and display/hide table2 using:
<img src="/icons/index.png" width="55" height="55">
My problem is that while using this code, in case of any browser activity, the table is reset back to default state. I am struggling to enable users once they show/hide table it should continue even when refresh/or navigate happens within the pages. I know I should use cookies but have no idea. Please someone guide me.
thanks

Answer 1

Use cookies to store table state.
<script type="text/javascript">
var tableState = getCookie("table2state");
if (tableState != "") {
document.getElementById('table2').style.display = tableState;
}
function setTable(what) {
if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "block";
setCookie(what + 'state', "block", 365);
} else if (document.getElementById(what).style.display == "block") {
document.getElementById(what).style.display = "none";
setCookie(what + 'state', "none", 365);
}
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
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);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
</script>