[基本編]ちょっとしたデータの保存に!ローカルストレージの使い方
この記事は自分のブログ( https://haru0101.github.io/velosa/ )にも掲載しております。
ローカルストレージとは
永続的にブラウザにデータを保存する方法です。
おもにショッピングサイトなどで『最近見た商品』みたいな機能を実装したいときに使用します。
ちょっとしたデータを保存したいときには、データベースを使うよりもかなり手軽かと思います。
モダンなブラウザではほぼ対応していて、IEでさえも最新版では問題なく使えます。
jQueryにもローカルストレージを扱う方法がありますが、
ここではvanillaJS、つまり普通のJavaScriptのローカルストレージについて説明します。
Cookieとの違いは?
似たような機能としてCookieなんかが思いつくと思いますが、
Cookieは保存できるデータ量が極端に少ない上に、
サーバとのやり取りの方法も異なります。
Cookieはサーバにリクエストするたびにデータを自動で送信します。
それに比べてローカルストレージはデータを利用するときのみデータを送信します。
なのでCookieと比べて軽量です。
localStorageとsessionStorageの2種類がある
これはローカルストレージについての記事なんですが、
ローカルストレージって『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の簡単な説明と使い方を紹介しました。
もっと詳しい使い方などはまた別の記事で紹介いたします。
Author And Source
この問題について([基本編]ちょっとしたデータの保存に!ローカルストレージの使い方), 我々は、より多くの情報をここで見つけました https://zenn.dev/harryduck/articles/32a33c4066982d5142b1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol