Como obter a variável JS para reter valor após actualização da página?

Isto é possível com window.localStorage ou window.sessionStorage. A diferença é que sessionStorage dura enquanto o navegador permanecer aberto, localStorage sobrevive ao reinício do navegador. A persistência aplica-se ao sítio web entire e não apenas a uma única página do mesmo.

Quando precisar de definir uma variável que deve ser reflectida na(s) página(s) seguinte(s), utilize:

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

E em qualquer página (como quando a página foi carregada), obtenha-a como se a tivesse carregado:

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

.getItem() devolverá nulo se não houver valor armazenado, ou o valor armazenado.

Note-se que **somente valores de string*** podem ser armazenados neste armazenamento, mas isto pode ser ultrapassado utilizando JSON.stringify e JSON.parse. Tecnicamente, sempre que chamar .setItem(), chamará .toString() sobre o valor e armazená-lo-á.

MDN's DOM guia de armazenamento (linkado abaixo), tem soluções/polyfills, que acabam por cair de volta a coisas como biscoitos, se localStorage estiver't disponível.

Seria uma má ideia utilizar uma minibiblioteca existente, ou criar a sua própria minibiblioteca, que abstraia a capacidade de guardar qualquer tipo de dados (como literalmente objectos, matrizes, etc.).

Referências:

• 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
• Compatibilidade de armazenamento do Browser - http://caniuse.com/namevalue-storage
• Armazenamento de objectos - https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

Terá de utilizar o cookie para armazenar o valor através da actualização da página. Poderá utilizar qualquer uma das muitas bibliotecas de cookies baseadas em javascript para simplificar o acesso aos cookies, como esta2.

Se quiser suportar apenas html5 então pode pensar em Armazenamento api como localStorage/sessionStorage

Ex: utilizando localStorage e biblioteca de cookies

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);
    }
}

Pode fazer isso armazenando cookies do lado do cliente.