見出し画像
Photo by golchiki

【継続21日目】アプリの状態を記憶する！JavaScriptの「ローカルストレージ」でデータを永続化

関野泰宏

はじめに：データの永続化とは？

Webアプリを開発していると、「ブラウザを閉じたり、ページをリロードしたりしても、データを消さずに保存しておきたい」というニーズが出てきます。

例えば、ユーザーのログイン状態、ダークモードの設定、カートに入れた商品リストなどが該当します。

JavaScriptには、これらのデータをユーザーのブラウザ内に永続的に保存するための仕組みがあり、それが ローカルストレージ（LocalStorage） です。

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

ローカルストレージは、ブラウザに標準で備わっている機能で、Webサイトのデータをキーと値のペアで保存できます。

  • 特徴:

    • データは永続的に保存されます（ユーザーが明示的に消さない限り）。

    • サーバーに送信されません（クライアント側でのみ利用）。

    • 容量は比較的小さいですが（約5〜10MB）、設定や少量のデータ保存には十分です。

💡 2. 基本的な操作方法

ローカルストレージは、グローバルオブジェクトである `localStorage` を通じて操作します。操作方法はシンプルで、キーと値のセットで行います。

💻 サンプルコード：名前の保存と表示

// 1. データの保存
localStorage.setItem('myName', 'Alice'); 
console.log("データを保存しました。");

// 2. データの取得
const storedName = localStorage.getItem('myName');
console.log("取得した名前: " + storedName); // 結果: Alice

// 3. データの削除
localStorage.removeItem('myName');
const deletedName = localStorage.getItem('myName');
console.log("削除後の取得結果: " + deletedName); // 結果: null

💡 3. JSONを使ったオブジェクトの保存（重要）

ローカルストレージに保存できる値は、すべて文字列（String）でなければなりません。そのため、配列やオブジェクト（Day 8-10で学習）のような複雑なデータを保存・取得するには、JSON形式への変換が必要です。

JSON (`JavaScript Object Notation`) は、JavaScriptのオブジェクトを文字列で表現するための形式です。

① 保存（オブジェクト → 文字列へ）

JavaScriptのオブジェクトをJSON形式の文字列に変換するには `JSON.stringify()` を使います。

const settings = {
  darkMode: true,
  fontSize: 16
};

// オブジェクトをJSON文字列に変換
const jsonString = JSON.stringify(settings); 

// ローカルストレージに保存
localStorage.setItem('appSettings', jsonString);
console.log("保存したJSON:", jsonString);

② 取得（文字列→オブジェクトへ）

ローカルストレージからJSON文字列を取得したら、元のJavaScriptのオブジェクトに戻すために `JSON.parse()` を使います。

// ローカルストレージからJSON文字列を取得
const storedJson = localStorage.getItem('appSettings');

// JSON文字列をJavaScriptオブジェクトに変換
const retrievedObject = JSON.parse(storedJson); 

console.log(retrievedObject.darkMode); // 結果: true (オブジェクトとして扱える)

📝 21日目のまとめと課題

✅ 本日の習得ポイント

  • ローカルストレージは、ブラウザ内にデータを永続的に保存する仕組み。

  • 保存・取得には `localStorage.setItem()` と `localStorage.getItem()` を使う。

  • 保存できるのは文字列のみ。複雑なデータは `JSON.stringify()` で文字列化し、取得後に `JSON.parse()` でオブジェクトに戻す必要がある。

📝 21日目の課題

  1. あなたが作成したいアプリの「カート」に見立てて、以下のデータを持つオブジェクト `cart` を宣言してください。

    • `itemCount: 3`

    • `totalPrice: 1500`

  2. この `cart` オブジェクトをJSON文字列に変換し、ローカルストレージにキー `shoppingCart` で保存してください。

  3. ローカルストレージからデータを取得し直し、元のオブジェクトに戻した後、コンソールに `totalPrice` の値（1500）を表示させてください。

これで21日目の学習は完了です！データの保存ができるようになり、アプリ開発の幅が大きく広がりました。明日も継続して頑張っていきましょう！

もっとJavaScriptを学びたい人は！


#駆け出しエンジニアと繋がりたい #プログラミング学習 #JavaScript #100DaysOfCode #今日の積み上げ #LocalStorage

いいなと思ったら応援しよう！