ローカルストレージの使い方【JavaScript】

Webサービスを開発していると、前回表示した際の情報をブラウザに保持しておきたいケースがよくあります。

そんな時に便利な機能が「ローカルストレージ」です。今回はこちらについて解説していきます。

ユーザがページをリロードした時も、

リロード前の行動を保持しておきたいんです

じゃあ、ローカルストレージを使ってみようか

それって難しいですか？

ううん、JavaScriptのコード2~3行で簡単に使えるよ

ローカルストレージとは？

ローカルストレージとはブラウザにデータを保存しておく技術です。

使い方としては、「サイトを次回表示した際に、前回のユーザの行動を記録しておく」ということが主になります。

例えば、「ショッピングサイト内で前回どの商品をチェックしたか？」をローカルストレージに保持しておけば、次回表示時に「最近チェックした商品」として表示することが可能です。

ローカルストレージとクッキーは、「ブラウザにデータを保持する」という部分では同じです。しかし以下のような違いがあります。

ローカルストレージは5MBですが、クッキーは4KBとローカルストレージの方がかなり大きいです。

クッキーでは保存期間を設定できますが、ローカルストレージは、削除しない限り半永久的に保存されます。

※ただし、ローカルストレージでもプログラムによって一定期間で削除することは可能です。方法については下記外部サイト様をご参照ください。
iwp.jp：JavaScriptのLocalStorageで期限やオブジェクトを簡単に扱う方法

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

①果物の選択肢からひとつ選択します。

②「保存する」ボタンをクリックすると、ローカルストレージにデータが保存されます

③「表示する」をクリックすると、ローカルストレージのデータが表示されます。

④サイトをリロードしてみてください。「前回の選択」に前回保存したデータが表示されています。

※削除してからリロードすると「前回の選択」が「未選択」になります。

※以降、「selectItem」はラジオボタンで選択した値を格納した変数を指します。

localStorage.setItem('fruit', selectItem);

第一引数がローカルストレージのkey、第二引数がvalueです。

今回のコードではkey：’fruit’、value：変数 selectItem（ラジオボタンで選択した値）

localStorage.getItem('fruit');

key：’fruit’ を指定して値を取得します。

localStorage.removeItem('fruit');

key：’fruit’ を指定して値を削除します。

ローカルストレージはブラウザに情報を保持する方法として、非常にシンプルで使いやすいです。

Webサービスに様々な便利機能を設置することも可能ですので、ぜひ利用してみましょう。