🧳

[基本編]ちょっとしたデータの保存に！ローカルストレージの使い方

2020/11/17に公開

ローカルストレージとは

永続的にブラウザにデータを保存する方法です。
おもにショッピングサイトなどで『最近見た商品』みたいな機能を実装したいときに使用します。
ちょっとしたデータを保存したいときには、データベースを使うよりもかなり手軽かと思います。

モダンなブラウザではほぼ対応していて、IEでさえも最新版では問題なく使えます。

jQueryにもローカルストレージを扱う方法がありますが、
ここではvanillaJS、つまり普通のJavaScriptのローカルストレージについて説明します。

似たような機能としてCookieなんかが思いつくと思いますが、
Cookieは保存できるデータ量が極端に少ない上に、
サーバとのやり取りの方法も異なります。

Cookieはサーバにリクエストするたびにデータを自動で送信します。
それに比べてローカルストレージはデータを利用するときのみデータを送信します。

なのでCookieと比べて軽量です。

これはローカルストレージについての記事なんですが、
ローカルストレージって『Web Storage』の1つなんですよね。

そしてこの『Web Storage』には2種類あって、もう1つが『sessionStorage』と呼ばれるものです。
ブラウザにデータを保存するという点では一緒なんですが、
ローカルストレージと違ってタブを閉じた時点で失います。
（ローカルストレージは永続的にデータを保存する。）

超シンプルです。

localStorage.setItem('key', 'value');

こうやってデータを保存します。
必ずキー：値の形になるのが特徴です。

また、以下のような形でも保存できます。

localStorage.key = 'value';
localStorage['key'] = 'value';

保存するのがsetItemなら、取得するのはgetItemです。

localStorage.getItem('key');

また、以下のような形でも取得できます。

localStorage.key;
localStorage['key'];

保存がsetItem、取得がgetItem、となると削除はremoveItemです。

localStorage.removeItem('key');

これで指定したキーの値を削除することができます。

また以下のような形でも削除できます。

delete localStorage.key;
delete localStorage['key'];

キーを指定せず、全部消してしまいたいときはclearしてしまいましょう。

localStorage.clear();

ローカルストレージの確認はブラウザの検証から
ローカルストレージに何が入っているか確認したい場合は、
ブラウザの検証からApplicationタブに移動し、Local Storageの中身を見ます。
※Google Chromeを使用しています。

今回はlocalStorageの簡単な説明と使い方を紹介しました。
もっと詳しい使い方などはまた別の記事で紹介いたします。