zukucode
主にWEB関連の情報を技術メモとして発信しています。

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の処理でダミーの値を実際に設定してみて、エラーになるかどうかで判定します。


関連記事

  • webpack-dev-serverでhttpsでのアクセスを可能にする方法

    webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...


  • ASP.NET UpdatePanelでPostBack時にフォーカス状態を保持する

    ASP.NETのUpdatePanelでPostBack時にコントロールのフォーカス状態を保持する方法を紹介します。UpdatePanelのポストバックの開始と終了のイベントを設定するで紹介した方法で...


  • stylelintで例外(無視)するタグを指定する

    cssで構文チェックを行うstylelintで任意のタグを無視してエラーとしない方法を紹介します。以下のようにruleのignoreTypesで無視するタグを指定します。以下の例ではamp htmlの...


  • JavaScript 文字列を連結する

    JavaScriptで文字列を連結します。JavaScriptでは文字列の連結は文字列同士を+で結合できます。例えば以下のように、数値同士を+演算子で計算すると足し算が行われてしまうので注意します。上...


  • JavaScript 0埋めをするテキストボックスを作成する

    テキストボックスで値を入力後、指定した文字数に0埋めする処理を実装します。以下のURLで紹介した処理を組み合わせれば簡単に実装できます。JavaScriptで指定した文字数に0埋めをするとJavaSc...


  • JavaScript ¥(円マーク)を文字列で扱う

    JavaScriptの¥(円マーク)は、正しく設定していないと利用者のPCのOSなどの環境によっては\(バックスラッシュ)で表示されてしまう可能性があるので、扱いには注意が必要です。JavaS...


  • JavaScript trimで前後の空白(スペース)を削除する

    JavaScriptで文字列の前後の空白(スペース)を削除します。trim関数を使えば先頭と末尾の半角スペース、全角スペースの両方が削除されます。IE8以下の場合はtrim関数が使えないので自作する必...


  • JavaScript 時刻の妥当性チェックをする

    時刻の妥当性チェックを行います。HH:mm書式で00:00〜23:59までの範囲が有効になるように正規表現でチェックをしています。


  • JavaScript システム日付を取得する

    JavaScriptでシステム日付を取得するには以下のように、Dateオブジェクトを宣言します。取得したDateオブジェクトから年〜ミリ秒までをそれぞれ取得できます。月だけは0から始まるので+1をする...


  • JavaScript switch文の基本的な使い方と注意点

    JavaScriptのswitch文の基本的な使い方を紹介します。JavaScript If,else,else if文の基本的な使い方でif文の基本的な使い方について説明しましたが、else ifの...