「Local Storage」とは、ブラウザ内にデータを半永久的に保存できるJavaScript APIです。データはキーとバリューのペアで保存され、ブラウザを閉じても保持されます。容量は約5MBあり、以下のような入力データの保存や、ユーザー設定の保存に適しています。
ページをリロードしたりブラウザを閉じたりしても、入力した内容が保存されて「こんにちは、〇〇」という形で表示されます。（クリアボタンを押すと保存内容がリセットされます。）
HTML / JavaScript コードはこちら
<form id="nameForm">
<label for="nameInput">名前を入力してください：</label>
<input type="text" id="nameInput">
<button type="submit">保存</button>
<button type="button" id="clearStorageButton">クリア</button>
</form>
<p id="greeting"></p>const nameInput = document.getElementById('nameInput');
const greeting = document.getElementById('greeting');
const nameForm = document.getElementById('nameForm');
const clearStorageButton = document.getElementById('clearStorageButton');
// Local Storageから名前を取得して表示する関数
function displayGreeting() {
const storedName = localStorage.getItem('name');
if (storedName) {
greeting.innerHTML = `こんにちは、<span style="color:red; font-weight: bold;">${storedName}</span>!`;
} else {
greeting.textContent = 'Local Storage Example';
}
}
// フォームが送信されたときに名前を保存する
nameForm.addEventListener('submit', (event) => {
event.preventDefault(); // フォームのデフォルトの送信を防ぐ
const name = nameInput.value;
localStorage.setItem('name', name);
displayGreeting();
});
// Local Storage(name)をクリアする
clearStorageButton.addEventListener('click', () => {
localStorage.removeItem('name');
displayGreeting();
});
// 初回ロード時に名前を表示する
displayGreeting();このAPIを応用すれば、ブラウザを閉じても保存できるTo-Doリストも簡単に作れちゃいます。
Local Storage の特徴
- 永続性
-
データはブラウザを閉じても保持され、ユーザーが明示的に削除するか、JavaScriptから削除するまで残る。
Local Storageと似た機能にセッションストレージがあり、セッションストレージのデータはタブやウィンドウを閉じると消える。 - 容量
-
cookieの容量よりも大きく、各ドメインにつき約5MB保存できる。
- 操作性
-
キー：バリュー（文字列）のペアでデータが保存される。
文字列形式で保存されるため、オブジェクトなど他の形式を保存する場合はJSON形式に変換する必要がある。（詳しくは本記事後半にて）
Local Storage の基本コード
- データを保存する
-
localStorage.setItem('キー', '値');上の例では
localStorage.setItem('name', name);と記述し、nameというキー＆フォームに入力した値をバリューとして保存しています。 - データを取得する
-
const value = localStorage.getItem('キー');上の例では
const storedName = localStorage.getItem('name');と記述し、変数storedNameに保存した値を代入しています。 - データを削除する
-
localStorage.removeItem('キー');上の例では
localStorage.removeItem('name');と記述し、nameというキーに保存した値を削除しています。また、Local Storageに保存されたすべてのデータを削除したい場合は以下コードを記述します。
localStorage.clear();
Local Storage の利用例
- ユーザー設定の保存
- ダークモードの設定や言語設定などを保存して、次回アクセス時に自動適用する。
- フォームデータの保持
- ユーザーがフォームに入力した内容を一時的に保存し、ページリロード時に復元する。
- ゲームの状態管理
- ゲームの進行状況やスコアなどを保存し、次回アクセス時に続きからプレイできるようにする。
Local Storage の注意点
- セキュリティ上、パスワード、クレジットカード情報などは保存しないようにする。
- 同じドメイン、ポート、プロトコルでのみデータが共有され、別のオリジンからはアクセスできない。
- ブラウザにも依存している。例えばChromeで保存されたデータは、FirefoxやSafariからはアクセスできない。
- データはブラウザを閉じても保持されるが、ブラウザのキャッシュをクリアすると消去される。
- 保存されるデータはすべて文字列形式となり、オブジェクトなど他の形式を保存する場合は
JSON.stringify()を使って文字列に変換し、さらに取得時にはJSON.parse()でオブジェクトに戻す必要がある。
JSON.stringify()とJSON.parse()の使い方
JSON.stringify()とJSON.parse()は、JavaScriptでオブジェクトをJSON形式の文字列に変換したり、その逆を行ったりする関数です。これらを使うことで、文字列しか保存できない Local Storage でもオブジェクトを保存・取得することができます。
JSON.stringify()オブジェクトの保存-
const person = { name: "Ben", age: 30, hobbies: ["reading", "gaming"] }; const jsonString = JSON.stringify(person); console.log(jsonString); // 出力: {"name":"Ben","age":30,"hobbies":["reading","gaming"]} localStorage.setItem('person', JSON.stringify(person)); JSON.parse()オブジェクトの取得-
const user1 = JSON.parse(localStorage.getItem('person')); console.log(user1.name); // "Ben"