JavaScriptのローカルストレージ完全入門！初心者でもわかる保存と読み込みの基本

1. ローカルストレージとは？

1. ローカルストレージとは？

ローカルストレージは、ブラウザにデータを保存しておける仕組みです。クッキーと似ていますが、容量が大きく、ブラウザを閉じてもデータが消えないのが特徴です。例えば、ユーザー名や設定情報、簡単なメモなどを保存するのに便利です。

2. データを保存する基本

2. データを保存する基本

ローカルストレージにデータを保存するにはlocalStorage.setItemメソッドを使います。キーと値を文字列で指定するだけで簡単に保存できます。

localStorage.setItem('username', 'tanaka');

この例では、キー「username」に「tanaka」という文字列を保存しています。

3. 保存したデータを読み込む方法

3. 保存したデータを読み込む方法

保存したデータを取り出すにはlocalStorage.getItemを使います。

const user = localStorage.getItem('username');
console.log(user); // tanaka

このように、保存した値を変数に入れて使うことができます。

4. データを削除する方法

4. データを削除する方法

不要になったデータはlocalStorage.removeItemで削除できます。キーを指定するだけです。

localStorage.removeItem('username');

全てのデータを消す場合はlocalStorage.clear()を使います。

localStorage.clear();

5. 数値やオブジェクトを保存するには

5. 数値やオブジェクトを保存するには

ローカルストレージは文字列しか保存できません。そのため、数値やオブジェクトを保存する場合はJSON.stringifyで文字列に変換します。

const settings = { theme: 'dark', fontSize: 16 };
localStorage.setItem('settings', JSON.stringify(settings));

取り出すときはJSON.parseで元のオブジェクトに戻します。

const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(savedSettings.theme); // dark

6. ローカルストレージを使った簡単なメモアプリ

6. ローカルストレージを使った簡単なメモアプリ

実際に簡単なメモを保存してみましょう。ユーザーが入力した内容をローカルストレージに保存し、ページを再読み込みしても表示されます。

const input = document.querySelector('#memo');
const saveBtn = document.querySelector('#save');
const display = document.querySelector('#display');

saveBtn.addEventListener('click', () => {
  localStorage.setItem('memo', input.value);
  display.textContent = input.value;
});

// ページ読み込み時に表示
display.textContent = localStorage.getItem('memo') || '';

7. ローカルストレージのメリットと注意点

7. ローカルストレージのメリットと注意点

ローカルストレージは、ブラウザに簡単にデータを保存できるのがメリットです。ログイン情報やユーザー設定の保持に便利です。しかし、保存できる容量はブラウザごとに限られており、セキュリティ上、重要なパスワードなどは保存しない方が安全です。

8. 実践的な使い方の工夫

8. 実践的な使い方の工夫

例えば、フォーム入力の途中保存やテーマ設定の保持、簡単なゲームのスコア保存など、ローカルストレージを活用するとユーザー体験を向上させられます。また、オブジェクトを扱う場合はJSONを活用し、定期的に不要なデータを削除する習慣をつけると安全です。

const score = { level: 2, points: 150 };
localStorage.setItem('gameScore', JSON.stringify(score));

// 次回アクセス時
const savedScore = JSON.parse(localStorage.getItem('gameScore'));
console.log(savedScore.points); // 150

まとめ

まとめ

JavaScriptのローカルストレージは、ブラウザにデータを保存し、再利用するための非常に便利な仕組みです。今回の記事では、ローカルストレージの基本概念から、データの保存、読み込み、削除、そして数値やオブジェクトの扱い方まで、初心者でも理解しやすい手順で解説しました。

基本的な操作としては、localStorage.setItemでデータを保存し、localStorage.getItemで取り出し、localStorage.removeItemで削除する方法があります。特にオブジェクトや配列などの複雑なデータを扱う場合には、JSON.stringifyとJSON.parseを組み合わせることで安全に保存と復元が可能です。また、ローカルストレージは文字列しか扱えない点を理解しておくことが重要です。

実践例として簡単なメモアプリを作成しました。ユーザーが入力した内容をローカルストレージに保存し、ページを再読み込みしてもその内容が保持されるという流れで、基本操作を体験できます。このような応用により、フォームの途中入力の保持やユーザー設定の維持、ゲームスコアの保存など、日常的なWebアプリ開発で非常に役立つスキルとなります。

さらに、ローカルストレージの注意点として、容量の制限やセキュリティ面を考慮する必要があります。特に個人情報やパスワードなどの機密情報は保存せず、不要になったデータは定期的にlocalStorage.removeItemやlocalStorage.clearで整理する習慣をつけると安全です。安全性を意識しつつ、ユーザー体験を向上させる工夫を取り入れることが大切です。

サンプルプログラムの振り返り

const user = localStorage.getItem('username') || 'ゲスト';
console.log('こんにちは、' + user + 'さん');

const settings = { theme: 'light', fontSize: 14 };
localStorage.setItem('userSettings', JSON.stringify(settings));

const savedSettings = JSON.parse(localStorage.getItem('userSettings'));
console.log('テーマ:', savedSettings.theme, 'フォントサイズ:', savedSettings.fontSize);

localStorage.removeItem('username'); // 不要になったデータを削除