[解決済み] ページ更新後も値を保持するJS変数を取得する方法は？重複

質問

javascriptの変数を永久に変更することは可能でしょうか？例えば、私が変数Xを設定し、それを1に等しくし、次にボタンのonClickでその変数を2に変更する場合、ページの更新時にその変数を2に維持するようにするにはどうしたらよいですか？

どのように解決するのですか？

これは 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 の 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
• オブジェクトの保存 HTML5 の localStorage にオブジェクトを格納する。