Saving JQuery Toggle State on Home Page Component

Question

I have an HTML Area component on the homepage that contains an iFrame that is toggled either visible or hidden on button click. I'm using the JQuery toggle function to do this. Currently the div for the area is hidden by default through CSS: style="display:none"

A new requirement has come in asking that the user's most recent show or hide (the selected toggle-state) be saved for the next page load, so if they chose to show the iFrame last time they were at the home page, the next time they visited it would be visible by default. Any recommended approaches for tackling this requirement? My code is below:

<meta charset="utf-8">
<title>drop demo</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  .button {
    padding-top: 10px;
    padding-right: 20px;
  }
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<button type="button" id="button"
title="Your personalized Sales Dashboard.">Show/Hide</button>
<div id="toggle" style="display:none" frameborder="2">
  <iframe src="https://example.com)" id="myfr" scrolling="no" frameborder="0" height="800px" width="100%">Your Browser Do not Support Iframe</iframe>
</div>
<script>
  $("#button").click(function () {
    $("#toggle").toggle("blind");
  });
</script>
<script>
  $(function () {
    $("#button").tooltip();
    var isVisible = $( "#toggle" ).is( ":visible" );
  alert(isVisible);
  });
</script>

Answer 1

Cookie seems to be right approach, here is what I could quickly draft and test in a HTML component.

<a onclick="setColor('red')" style="color:red;"> Give me Red ! </a>
<br/>
<a onclick="setColor('pink')" style="color:pink;"> Give me Pink ! </a>


<script>

var cookieName = 'colorSelection';
var cookieVal ;
var allCookies = document.cookie.split(';');

for ( var idx = 0; idx < allCookies.length; idx++ ) {
    if (allCookies[idx].trim().indexOf(cookieName) == 0) {
        cookieVal = allCookies[idx].trim().split('=')[1];
        break;
    }
}

if (cookieVal) {

    alert('Your last selected color was : ' + cookieVal);

}


function setColor(valColor) {   
    document.cookie=cookieName + "=" + valColor;
    alert('color is ' + valColor + ' now');
}

</script>

Above code sets a cookie via home page component, and reads it back on reload. One can change cookie value from red to pink or vice versa, via hyperlinks.

You don't need jquery as such for manipulating cookies via Javascript. You might want to add "expiries" attribute to cookie, in case your values are time bound.

Answer 2

You can use HTML5 sessionStorage see https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage