¿Cómo conseguir que la variable JS mantenga su valor después de actualizar la página?

Esto es posible con window.localStorage o window.sessionStorage. La diferencia es que sessionStorage dura mientras el navegador permanece abierto, localStorage sobrevive más allá de los reinicios del navegador. La persistencia se aplica a todo el sitio web, no sólo a una página.

Cuando necesites establecer una variable que deba reflejarse en la(s) siguiente(s) página(s), utiliza:

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

Y en cualquier página (como cuando la página se ha cargado), consígalo como:

var someVarName = localStorage.getItem("someVarKey");

.getItem() devolverá null si no hay valor almacenado, o el valor almacenado.

Tenga en cuenta que sólo se pueden almacenar valores de cadena en este almacenamiento, pero esto puede superarse utilizando JSON.stringify y JSON.parse. Técnicamente, cada vez que llames a .setItem(), llamará a .toString() sobre el valor y lo almacenará.

La guía de almacenamiento del DOM de MDN (enlazada más abajo), tiene soluciones/polipastos, que acaban recurriendo a cosas como las cookies, si localStorage no está disponible.

No sería una mala idea utilizar una mini biblioteca existente, o crear una propia, que abstraiga la capacidad de guardar cualquier tipo de datos (como literales de objetos, matrices, etc.).

Referencias:

• Navegador Storage - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• LocalStorage - https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage
• JSON - https://developer.mozilla.org/en-US/docs/JSON
• Compatibilidad con el almacenamiento del navegador - http://caniuse.com/namevalue-storage
• Almacenamiento de objetos - https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

Tendrá que utilizar una cookie para almacenar el valor a través de la actualización de la página. Puede utilizar cualquiera de las muchas bibliotecas de cookies basadas en javascript para simplificar el acceso a las cookies, como esta

Si quieres soportar sólo html5 entonces puedes pensar en Storage api como localStorage/sessionStorage

Ejemplo: usando localStorage y cookies library

var mode = getStoredValue('myPageMode');

function buttonClick(mode) {
    mode = mode;
    storeValue('myPageMode', mode);
}

function storeValue(key, value) {
    if (localStorage) {
        localStorage.setItem(key, value);
    } else {
        $.cookies.set(key, value);
    }
}

function getStoredValue(key) {
    if (localStorage) {
        return localStorage.getItem(key);
    } else {
        return $.cookies.get(key);
    }
}

Puede hacerlo almacenando cookies en el lado del cliente.