【JavaScript】localStorageの使い方をマスターする。（取得・保存・削除）

本記事の目次

localStorageとは

local Storageとは、HTHL5から導入された「JavaScriptでブラウザにデータを記録する仕組み」のことです。

localStorageプロパティでローカルのStorageオブジェクトにアクセスすることで、データベースを使うことなくデータの保存や取得・変更などの操作を行うことができます。

localStorage に保存されたデータは永続的に保存されるため、リロードしたりタブを消してもデータは維持されたままになります。

また、localStorageにはJavaScriptから容易にアクセスできるため、セキュリティ上の観点からパスワードなどの重要な情報は保存しないように注意が必要です。

他にブラウザで情報を保存できるCookie、sessionStorageとの違いの比較表です。

localStorageで保存できる容量は、Cookieに比べて多いことがわかります。

また、localStorageではデータが永続的に保存されるため、データ削除の処理を記述しない場合ずっとデータが残ることになるため考慮する必要があります。

localStorageではkeyとvalueのセットでデータを扱います。

また、valueで保存できるデータはテキストデータのみとなるため、配列やオブジェクトなどのデータを扱いたいときはデータを変換する必要があります。

まずはブラウザがlocalStorageを使用できるかのif文を記述して、使える場合に処理を行うように記述していきます。

if(window.localStorage) {
  // 処理
} else {
  console.log('localStorageが使えません。');
}

localStorageからデータを取得する場合は、getItem()メソッドを使用します。

引数には取得したいデータのkeyを指定しましょう。

const data = localStorage.getItem('key');

JSONデータ（文字列）を取得して、配列やオブジェクトに変換して扱うこともできます。

const data = localStorage.getItem('key');
data = JSON.parse(data);

localStorageにデータを保存する場合は、setItem()メソッドを使用します。

第一引数に保存するデータのkeyを、第二引数に保存するデータを指定しましょう。

const data = '保存するデータ';
localStorage.setItem('key', data);

配列やオブジェクトを保存したい場合は、一度JSONデータとして文字列に変換してから保存します。

const array = ['データ1', 'データ2']
const arrayText = JSON.stringify(array);
localStorage.setItem('key', arrayText);

localStorageのデータを削除する場合は、removeItem()メソッドを使用します。

引数には削除したいデータのkeyを指定しましょう。

const data = localStorage.removeItem('key');

また、clear()メソッドを使用することで、全てのデータを削除することができます。

localStorage.clear();
// ※削除されるのはドメイン下のデータのみ

localStorageにはJavaScriptで簡単にアクセスできるため、個人情報やパスワードなどの重要な情報を保存するのはリスクが大きすぎます。

もしそのような情報を保存したい場合には、他の方法を検討しましょう。

localStorageで同じkeyに対して複数の情報を保存してしまうと、上書きされ先に保存していたデータは消えてしまいます。

開発を始めたばかりや、小さなプロジェクトでは問題ないかもしれませんが、keyが被ってしまうとバグの原因になるので十分に管理しましょう。

localStorageには文字列データしか保存できません。

文字列以外のデータを保存したい場合、一度文字列に変換して保存する必要があります。（もちろんデータを使うときには文字列から変換する必要があります。）

localStorageでは、文字列以外のデータの場合は扱いが大変だという欠点があるということです。

ブラウザによって多少異なりますが、localStorageに保存できるデータ容量には上限があります。

そのため、大きなデータや大量のデータを扱うアプリケーションでは考慮する必要があります。

上限内に収まる想定であれば問題ありませんが、データが大きくなってしまった時のことは考えておく必要があります。