JavaScriptでローカルストレージに文字列を保存する方法を初心者向けに解説

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

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

ローカルストレージは、ウェブブラウザにデータを長期間保存できる仕組みです。JavaScriptを使うことで、ユーザーがブラウザを閉じてもデータを保持できます。クッキーと違ってデータ容量も大きく、文字列や数字を簡単に保存可能です。

2. ローカルストレージに文字列を保存する基本

2. ローカルストレージに文字列を保存する基本

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

localStorage.setItem("username", "yamada");

上記では、キー「username」に文字列「yamada」を保存しています。ブラウザを閉じても、このデータは保持されます。

3. 保存した文字列を取り出す方法

3. 保存した文字列を取り出す方法

保存した文字列は、localStorage.getItemで取得できます。

const user = localStorage.getItem("username");
console.log(user); // yamada

キーを指定すると対応する値が返ります。もしキーが存在しない場合は null が返ってきます。

4. 保存したデータを削除する方法

4. 保存したデータを削除する方法

ローカルストレージのデータは削除することも可能です。removeItemを使います。

localStorage.removeItem("username");

これでキー「username」に保存されていたデータが消えます。全部消したい場合は clear を使います。

localStorage.clear();

この方法はすべてのローカルストレージのデータを削除するので注意してください。

5. 数字やオブジェクトを文字列として保存する

5. 数字やオブジェクトを文字列として保存する

ローカルストレージには文字列しか保存できません。数字やオブジェクトはJSON.stringifyで文字列に変換して保存します。

const userScore = { score: 100, level: 3 };
localStorage.setItem("gameData", JSON.stringify(userScore));

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

const savedData = JSON.parse(localStorage.getItem("gameData"));
console.log(savedData.score); // 100

6. 入力フォームの値をローカルストレージに保存する例

6. 入力フォームの値をローカルストレージに保存する例

ウェブサイトでユーザーが入力したデータを一時的に保存しておきたい場合にも使えます。

<input type="text" id="nameInput">
<button id="saveBtn">保存</button>
<script>
  const input = document.getElementById("nameInput");
  const btn = document.getElementById("saveBtn");

  btn.addEventListener("click", function() {
    localStorage.setItem("inputName", input.value);
    alert("保存しました: " + input.value);
  });
</script>

この例では、ボタンを押すと入力された文字列がローカルストレージに保存されます。再度ページを開いてもデータは残っています。

7. ローカルストレージの容量と注意点

7. ローカルストレージの容量と注意点

ローカルストレージの容量はブラウザごとに異なりますが、だいたい5MB程度です。大きなファイルや画像は保存できません。また、他のユーザーと共有されないので個人データの保存に便利ですが、機密情報は避けるのが安全です。

8. ローカルストレージを活用した簡単な応用例

8. ローカルストレージを活用した簡単な応用例

例えば、サイト訪問時のテーマ設定やお気に入りリストの保存にも使えます。

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
document.body.className = theme; // ページのテーマを適用

このように、ユーザーごとの設定を保存して次回アクセス時に反映させることも可能です。

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

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

ローカルストレージはブラウザを閉じてもデータが残りますが、セッションストレージはブラウザを閉じると消えます。短期間だけ保存したい場合はセッションストレージを使うと便利です。

// セッションストレージに保存
sessionStorage.setItem("tempData", "一時的な値");

10. まとめにかける前のポイント

10. まとめにかける前のポイント

ローカルストレージは簡単に文字列を保存・取得・削除でき、ユーザーごとのデータ保存や設定の保持に便利です。保存できるのは文字列のみですが、JSON.stringifyとJSON.parseを使うことでオブジェクトも扱えます。容量やセキュリティに注意しながら活用しましょう。

まとめ

まとめ

この記事では、JavaScriptでローカルストレージを使って文字列やオブジェクトを保存・取得・削除する方法について、初心者向けに詳しく解説しました。ローカルストレージは、ブラウザ内にデータを長期間保持できる仕組みで、ユーザーがページを閉じても情報を残せるため、ユーザーごとの設定保存やフォーム入力の保持に非常に便利です。基本的な操作としては、localStorage.setItemで保存、localStorage.getItemで取得、localStorage.removeItemやlocalStorage.clearで削除が可能です。また、文字列しか保存できない制約がありますが、JSON.stringifyを使えばオブジェクトや配列も文字列化して保存でき、JSON.parseで元に戻すことができます。

実際の応用例として、入力フォームの内容を保存したり、サイトのテーマ設定やお気に入りリストの保存など、ユーザー体験を向上させる使い方も紹介しました。ローカルストレージの容量はブラウザによって異なりますが、一般的に約5MB程度で、大きなファイルや画像は保存できません。また、セキュリティ上、個人情報や機密情報の保存は避けるべきです。ローカルストレージとセッションストレージの違いも押さえておくと、短期的なデータ保持や長期的な保存用途で使い分けができます。

ここまで学んだポイントを整理すると、ローカルストレージは非常にシンプルでありながら、ユーザー体験を向上させる多くの可能性を持っています。初心者でも簡単に実装できるため、フォーム保存やユーザー設定の保持など、実務でもすぐに活用できる技術です。

 // テーマをローカルストレージに保存 localStorage.setItem("theme", "dark"); // ページ読み込み時にテーマを反映 const theme = localStorage.getItem("theme"); if (theme) { document.body.className = theme; }