ページ更新後にJS変数に値を保持させるにはどうすればよいですか？

Question

javascript変数を永久に変更することはできますか？のように、私は変数Xを設定し、1に等しくする。ボタンのonClickはその変数を2に変更する。どのようにして、その変数をページの更新時に2にとどめることができるか？

Answer 1

これはwindow.localStorage（又はwindow.sessionStorage）で可能です。違いは、ブラウザが開いたままである限り、sessionStorageが続くことです。localStorageは、ブラウザの再起動後も存続します。永続性は、ウェブサイト全体に適用されます（）。

あなたは、次のページ（複数可）に反映されるべき変数を設定する必要があり、使用：

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

そして、（ページが読み込まれたときのように）任意のページでは、それが好き得る：

何値が格納されていない場合

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

.getItem()はnullを返すか、または値が格納されています。

このストレージには文字列値のみを格納できますが、これはJSON.stringifyとJSON.parseを使用することで解決できます。技術的には、.setItem()に電話するたびに、.toString()を呼び出してその値を保存します。

MDNのDOMストレージガイド（下記にリンクしています）は、回避策/ポリフィルを持っていて、localStorageが利用できない場合、クッキーのようなものに落ちます。

オブジェクトリテラルや配列などのデータ型を保存する機能を抽象化する既存のミニライブラリを作成するのは悪いことではありません。

---

参考文献：

• ブラウザ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
• は、オブジェクトを格納する - Storing Objects in HTML5 localStorage

Answer 2

ページを更新するときに値を保存するには、Cookieを使用する必要があります。あなたは、あなたがlocalStorage/sessionStorage

例のようにStorage API考えることができる唯一のHTML5をサポートしたい場合は、this one

のように、クッキーへのアクセスを簡単にするために、多くのJavaScriptベースのクッキーライブラリのいずれかを使用することができます。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); 
    } 
} 

Answer 3

あなたは、クライアント側のクッキーを格納することによってそれを行うことができます。

Answer 4

クッキーに加えて、localStorageには、「半永続的」クライアントデータを格納できる場所が少なくとも1つあります。window.name。 window.nameに割り当てる文字列の値は、ウィンドウが閉じられるまでそこにとどまります。

これをテストするには、コンソールを開いてwindow.name = "foo"と入力し、ページを更新してwindow.nameと入力してください。 fooと応答する必要があります。

これはちょっとしたハックですが、何らかの理由（従来のクライアント）でlocalStorageを使用できない場合は不要なデータがサーバーに送信されるのを防ぐため、考慮すべき選択肢かもしれない。

window.nameには別の興味深いプロパティがあります。これは他のドメインから提供されたウィンドウに表示されます。それはwindowのほぼすべての他の財産のような同じ起源の政策の対象ではありません。したがって、ユーザーがページを移動またはリフレッシュしている間に半永久的なデータを保存することに加えて、CORSフリーのクロスドメイン通信にも使用できます。

window.nameは文字列を格納することができますが、利用可能度はJSONであり、複雑なデータでもそれほど大きな問題ではありません。