ページ更新後もJS変数の値を保持するには？

これは、window.localStorageまたはwindow.sessionStorageで可能です。違いは、sessionStorageはブラウザが開いている限り持続するのに対し、localStorageはブラウザの再起動後も持続するということです。 永続化は、単一のページだけでなく、全体のウェブサイトに適用されます。

次のページに反映されるべき変数を設定する必要がある場合は、次のように使用します。

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

そして、任意のページ（ページが読み込まれた時など）では、次のように取得します。

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

.getItem()は、格納されている値がなければnull`を、格納されている値を返します。

このストレージに格納できるのは 文字列の値 だけであることに注意してください。しかし、これは JSON.stringify や JSON.parse を使用することで克服できます。技術的には、.setItem()を呼び出すたびに、値に対して.toString()が呼び出され、それが保存されます。

MDN's DOM storage guide (linked below) には、localStorage が利用できない場合に、最終的に Cookie のようなものにフォールバックするワークアラウンド/ポリフィルがあります。

あらゆるデータ型(オブジェクトリテラルや配列など)を保存する機能を抽象化した既存の、あるいは独自のミニライブラリを使用するのも悪くないアイデアでしょう。

参考文献：。

• ブラウザの 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
• ブラウザストレージの互換性 - http://caniuse.com/namevalue-storage
• オブジェクトの保存 - https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

ページ更新時に値を保存するには、クッキーを使用する必要があります。クッキーへのアクセスを簡単にするために、this oneのような多くのjavascriptベースのクッキーライブラリのいずれかを使用することができます。

html5のみをサポートしたい場合は、localStorage/[sessionStorage][4]のようなStorageAPIを考えることができます。

例：localStorageと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);
    }
}

[4]： http://www.w3.org/TR/webstorage/#the-sessionstorage-attribute

そのためには、クライアント側でクッキーを保存することが必要です。