JavaScript localStorageの基本的な使い方まとめ
JavaScriptでデータをブラウザに簡単に保存する仕組みのlocalStorageの基本的な使い方を紹介します。
値の設定（保存）
setItemで値を保存します。
keyは保存するときにキーとなる値です。取り出すときにこのキーを指定して取得します。
同一のキーですでに登録されていた場合は上書きされます。
valueはセットする値です。文字列を指定する必要があるので、オブジェクト（json）を保存したい場合はJavaScript jsonと文字列の相互変換をする方法で紹介した方法で、文字列に変換して登録します。
localStorage.setItem(key, value);
// 例
// 'test'というキーに`sample`という文字列をセットする
localStorage.setItem('test', 'sample');
// オブジェクトは文字列に変換して登録する
localStorage.setItem('test', JSON.stringify(obj));値の取得
設定時に使用したキーを使って値を取得します。
上記で紹介したように、オブジェクトは文字列で登録されているので、取得した値をオブジェクトとして扱いたい場合はオブジェクトに変換する必要があります。
value = localStorage.getItem(key);
// 例
localStorage.setItem('test', 'sample'); // 保存
value = localStorage.getItem('test');
console.log(value); // "sample"
value = localStorage.getItem('test');
obj = JSON.parse(value); // オブジェクトに変換値の削除
設定した値を削除するには以下のコマンドを実行します。
keyに設定した値が削除されます。keyの値が空白になるのではなく、keyごと削除されます。
localStorage.removeItem(key);クリア
localStorageに登録されている値をすべてクリアするには以下のコマンドを実行します。
localStorage.clear();使用可能かどうかチェック
JavaScript ブラウザがlocalstorageに対応しているか判定するで紹介しているように、try-catchの処理でダミーの値を実際に設定してみて、エラーになるかどうかで判定します。