Using the sessionvars js library to create persistent variables between static pages

If you use a template driven static website generator, then the likihood is you will stumble across a problem requiring some level of persistency between pages. The best way to describe this problem is with an example. Suppose your favourite static site generator involved the creation of a nav menu alongside the main content. The templating engine would go ahead and create n pages of html/js containing both the menu and the main content. This is fine at a basic level, but what if you needed the menu to be dynamic and persistent? What if the current state of the menu (collapsed,hidden etc) needed to be perseved between page loads? The html, css and js would be reloaded at each page load, resetting the menu to it's default style/state. The obvious solution to this problem is to use cookies, however I wanted a cleaner js implementation. Another option is PersistJS, which looked promising but complex compared to the solution I opted for: sessvars.js.

sessionvars

The simplest way to sum up the functionality of sessvars.js comes from its somewhat modest creator:

So I've made a small script that let you use JavaScript session variables without using cookies.

Perfect. This should allow us to pass the state of our menu page-to-page. Firstly, how does it work?

window.name

In js, the window.name property is primarily used to set targets for hyperlinks and forms. A user can name the current browser window to provide a handle to direct newly opened pages. As the variable is associated with the window and not the current page, the variable persists across page load events.

sessvars.js takes advantage of this behavior by encoding the current session variables into a single string and assigning that string to window.name. When you access a session variable, the string is simply decoded.

Use

First, include the sessvars.js in the header of your site:

html:

<script type="text/javascript" src="path/to/sessvars.js"></script>

Then in your Javascript, sessionvars can be set, loaded and used to determine the layout of your html. For example, a function that determines the state of a sessvar can be checked on page load and used to set the class of a div. As each class of the div is associated with different CSS this then determines the appearance of the page:

js:

function update_cat_toggle()
{
  var bt = document.getElementById('cats_bt');
  if (sessvars.cats_bt_state) {
    bt.className = sessvars.cats_bt_state;
    console.log("setting cat bt class to "+sessvars.cats_bt_state); 
  }
  else
  {
    sessvars.cats_bt_state = bt.className;

  }
  console.log("set cat bt class to "+bt.className); 
}

css:

#cats_bt.active{
    text-decoration: none;
    color: rgb(0,144,216);
    background-color: #DDD;
}
#cats_bt.nonactive{
    text-decoration: none;
    color: rgb(215,0,113);
    background-color: #F00;
}

Clearly, you want to limit the number of variables stored in sessvars but I cannot foresee needing more than a handful of session variables.