今回は、JavaScriptのストレージAPIについて紹介します。ローカルストレージとセッションストレージを使うことで、ウェブブラウザ内にデータを保存することができます。

ローカルストレージとセッションストレージの違い

まず、ローカルストレージとセッションストレージの違いについて見てみましょう。

ローカルストレージ

ローカルストレージは一度データを保存すると、ブラウザを閉じてもデータが消えません。長期間データを保持したいときに便利です。

セッションストレージ

セッションストレージはブラウザを閉じるとデータが消えてしまいます。一時的なデータを保存したいときに使いやすいです。

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

ここでは、簡単な例を使ってローカルストレージを使う方法を解説します。

データを保存する

localStorage.setItem('キー', '値');

例えば、ユーザー名を保存する場合は次のようにします。

localStorage.setItem('username', 'John Doe');

データを読み込む

ローカルストレージに保存されたデータを読み込むには、getItemメソッドを使います。

let username = localStorage.getItem('username');
console.log(username); // John Doe

データを削除する

ローカルストレージからデータを削除したいときは、removeItemメソッドを使います。

localStorage.removeItem('username');

セッションストレージの使い方

次に、セッションストレージの使い方を説明します。ローカルストレージと使い方はほとんど同じです。

データを保存する

sessionStorage.setItem('キー', '値');

例えば、セッションIDを保存する場合は次のようにします。

sessionStorage.setItem('sessionID', '12345');

データを読み込む

セッションストレージに保存されたデータを読み込むには、getItemメソッドを使います。

let sessionID = sessionStorage.getItem('sessionID');
console.log(sessionID); // 12345

データを削除する

セッションストレージからデータを削除したいときは、removeItemメソッドを使います。

sessionStorage.removeItem('sessionID');

まとめ

今回は、JavaScriptのストレージAPIについて簡単に紹介しました。ローカルストレージとセッションストレージの違いを理解し、適切に使い分けることで、ウェブアプリケーションの操作性が向上します。