ウェブストレージのマスター：セッション間でデータを永続化する

はじめに

この実験では、活況を呈するテックスタートアップに勤務する意志の強いウェブ開発者であるアレックスが、データ永続化の分野に挑戦しています。個人向けの財務トラッカーで財務記録を追跡し表示するメカニズムを成功裏に作成した後、次の課題は、これらの記録がブラウザセッション全体にわたって永続化することを確認することです。目的は、ユーザーがアプリに戻って以前に入力したすべてのデータがそのままあることを確認できるようにすることで、アプリの使いやすさとユーザー満足度を向上させます。このタスクは、アレックスにウェブストレージの概念を紹介し、特に localStorage API を活用してアプリケーションの状態を保存および取得する方法を学ばせます。

この実験では、localStorage を使ってユーザーのブラウザにローカルにデータを保存し、ウェブアプリケーションにおけるデータの永続化を可能にする方法を学びます。

ポイント：

localStorage の使い方
JSON のシリアル化と逆シリアル化 (JSON.stringify, JSON.parse)

LocalStorage

localStorage は、通常約 5MB の保存制限付きでクライアントサイドでセッションデータを保存するメカニズムを提供します。セッションストレージ (sessionStorage) とは異なり、localStorage のデータはセッションが終了しても消えません。

データの保存

setItem() メソッドを使うと、localStorage にデータを保存できます。このメソッドには 2 つのパラメータが必要です。キーと値です。

例：

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

データの取得

getItem() メソッドを使って、localStorage からデータを読み取ります。このメソッドには 1 つのパラメータが必要です。キーです。

例：

localStorage.setItem("username", "Alice");
let username = localStorage.getItem("username");
console.log(username); // 出力：Alice

localStorage data storage example

ローカルストレージへのレコード保存

このステップでは、アレックスと一緒に、新しいレコードが追加されるたびに、財務記録の配列を localStorage に保存する機能を実装します。これにより、ユーザーのデータがデバイスにローカルに保存され、ブラウザが閉じられたり更新されたりした後でも利用できるようになります。

script.js の冒頭、addFinancialRecord 関数を定義する前に、localStorage から保存されたレコードを読み込み、financialRecords 配列を初期化するために以下のコードを追加します。

script.js を変更して localStorage からレコードを読み込むようにします。

document.addEventListener("DOMContentLoaded", function () {
  let records = JSON.parse(localStorage.getItem("records")) || [];
});

JSON.parse() 静的メソッドは、JSON 文字列を解析して、その文字列で表される JavaScript の値またはオブジェクトを構築します。結果のオブジェクトが返される前に変換を行うために、オプショナルなリバイバー関数を提供することができます。

レコードの永続化を実装する

addRecord 関数にレコードを localStorage に保存するロジックを追加します。

document.addEventListener("DOMContentLoaded", function () {
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
  };

  const addRecord = (description, amount, type) => {
    records.push({ description, amount, type });
    saveRecords();
  };
});

これで、新しい財務レコードが追加されるたびに、それが localStorage に保存され、データの永続化が保証されます。

次に、会計の削除機能を実装する必要があります。削除機能を書く前に、新しい配列操作方法を学ぶ必要があります。

スプライスメソッド

splice() メソッドは 3 つのパラメータを取ることができます。開始位置、削除する要素数、および追加する新しい要素です。

構文：

array.splice(start, deleteCount, item1, item2,...)

start：配列を変更する開始インデックス。
deleteCount：削除する要素数。要素を削除しない場合は 0 にする必要があります。
item1, item2,...：配列に追加する新しい要素。

要素の削除

配列から要素を削除するには、新しい要素を追加する必要なく deleteCount パラメータを設定します。

let fruits = ["Apple", "Banana", "Cherry", "Date"];
fruits.splice(1, 2); // インデックス 1 から 2 つの要素を削除
console.log(fruits); // 出力：['Apple', 'Date']

Array splice removing elements

要素の追加

splice() を使うと、要素を削除せずに配列の特定の位置に要素を追加することもできます。deleteCount を 0 に設定して追加する要素を指定します。

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(2, 0, "Date"); // インデックス 2 に 'Date' を追加
console.log(fruits); // 出力：['Apple', 'Banana', 'Date', 'Cherry']

Adding elements with splice

要素の置換

deleteCount を設定して新しい要素を追加することで、splice() は要素を削除して追加することができ、効果的に要素を置換します。

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(1, 1, "Date"); // インデックス 1 の 1 つの要素を 'Date' に置換
console.log(fruits); // 出力：['Apple', 'Date', 'Cherry']

Replacing array elements with splice

レコードの削除機能を追加する

レコードの削除機能を追加します。

script.js ファイルに以下のコードを記述します。

document.addEventListener("DOMContentLoaded", function () {
  window.deleteRecord = (index) => {
    records.splice(index, 1);
    saveRecords();
  };
});

まとめ

この実験では、あなたとアレックスは、個人向けの財務トラッカーアプリケーションにおけるデータの永続化の課題に取り組みました。localStorage API を学ぶことで、アプリケーションがブラウザセッション間で財務記録を保存および取得できるようになり、ユーザー体験を大幅に向上させました。このウェブストレージの紹介は、より複雑でユーザーフレンドリーなウェブアプリケーションを作成するための新しい可能性を開きます。

実践を通じて、データを保存するために JSON.stringify を使って文字列形式にシリアライズし、取得するために JSON.parse を使って再び JavaScript オブジェクトに逆シリアライズする方法を見てきました。このプロセスは、クライアントサイドのウェブ開発におけるアプリケーション状態の管理にとって重要であり、将来のウェブ開発プロジェクトに役立つ基本的なスキルを形成します。

データの保存と取得