javascriptの変数を永続的に変更することはできますか?例えば、変数Xを1に設定し、ボタンのクリックでその変数を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's DOM storage guide (linked below) には、localStorage
が利用できない場合に、最終的に Cookie のようなものにフォールバックするワークアラウンド/ポリフィルがあります。
あらゆるデータ型(オブジェクトリテラルや配列など)を保存する機能を抽象化した既存の、あるいは独自のミニライブラリを使用するのも悪くないアイデアでしょう。
参考文献:。
Storage
- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/StoragelocalStorage
- https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorageJSON
- https://developer.mozilla.org/en-US/docs/JSONページ更新時に値を保存するには、クッキーを使用する必要があります。クッキーへのアクセスを簡単にするために、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