JavaScript を使用してデータを変更および保存する方法

フロントエンド開発では、インタラクティブな効果や論理処理を実現するために JavaScript を使用する必要があることがよくあります。その中で、データの変更と保存も共通の要件の 1 つです。この記事ではJavaScriptを使用してデータを変更・保存する方法を紹介します。

1. 概要

一般的な Web サイトやアプリケーションでは、通常、ユーザーはコンテンツを変更したりデータを操作したりする必要があります。これらの変更されたコンテンツまたはデータは、バックエンド サーバーまたはローカル ハード ドライブに保存する必要があります。したがって、データ保存機能を実装するには、JavaScript を使用して対応する API を呼び出す必要があります。

2. データ型

データ保存を実装する前に、さまざまな種類のデータをどのように処理する必要があるかを知る必要があります。通常、データは次の 2 つのカテゴリに分類できます:

1. フォーム データ: フォーム データは通常、テキスト ボックス、ドロップダウン ボックス、ラジオ ボタン ボックスなど、ユーザーによって入力されたフォーム データです。 。このデータは、JavaScript の document.forms プロパティを通じて取得でき、JSON 形式で処理され、AJAX を通じてバックエンド サーバーに送信されて保存されます。
2. ローカル データ タイプ: ローカル データ タイプには、Cookie、Web Storage、IndexedDB などが含まれます。このデータは、ユーザーのログイン情報、アプリケーション設定、ビジネス データなどを保存するために使用できます。

3. フォーム データ ストレージ

フォーム データは最も一般的なタイプの 1 つであり、JavaScript と AJAX を使用してフォーム データをバックエンド サーバーに送信できます。以下に例を示します。

document.getElementById("saveButton").addEventListener("click", function(){
  var form = document.forms["myForm"];
  var formData = new FormData(form);

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/saveData.php");
  xhr.send(formData);

  xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
});

この例では、addEventListener メソッドを使用してクリック イベントを追加します。このイベントは、XMLHttpRequest オブジェクトの POST メソッドを通じてフォーム データを /saveData.php ファイルに送信します。サーバーが応答を返すと、返されたテキストがコンソールに表示されます。

4. Web ストレージの保存

Web ストレージは、ブラウザーのローカル ストレージ API の一種です。 localStorage オブジェクトおよび sessionStorage オブジェクトを通じてアクセスできます。以下に例を示します。

// 存储数据
localStorage.setItem("username", "Jack");
localStorage.setItem("age", "25");

// 读取数据
var username = localStorage.getItem("username");
var age = localStorage.getItem("age");

// 删除数据
localStorage.removeItem("username");
localStorage.clear(); // 删除所有数据

上記のコードは、localStorage を使用してデータを保存および読み取る方法を示しています。このデータは、手動でクリアされるか、ストレージ制限に達するまで、ブラウザーに残ります。

5. 概要

この記事では、JavaScript を使用してフォーム データの保存や Web Storage ストレージなどのデータを変更および保存する方法を紹介します。これらのテクノロジーにより、ユーザー エクスペリエンスが大幅に向上し、アプリケーションのパフォーマンスと効率が向上します。もちろん、実際のアプリケーションでは、ユーザーのニーズを満たすために、特定のシナリオに応じて最適なデータ型と保存方法を選択する必要があります。

以上がJavaScript を使用してデータを変更および保存する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。