データを DOM に保存するにはどうすればよいですか?

データを DOM に保存するということは、データをプレーン テキスト形式で保存することを意味します。たとえば、React またはその他のリアクティブ フレームワークを使用しているときに、データを状態変数に保存します。ユーザーが入力フィールドのデータを更新すると、更新されたデータが状態変数に保存されます。

したがって、フォームを送信する前にデータを状態変数に保存します。フォームが送信されるとき、状態変数の値が使用されます。

プレーン JavaScript では、データをプレーン テキスト形式で保存するなど、同じことを行うことができ、フォームを送信する必要があるときはいつでも、入力フィールドからデータを取得する代わりに DOM からデータを取得できます。

ここでは、JavaScript と Jquery を使用して DOM にデータを保存する方法を学習します。

JavaScript を使用して DOM にデータを保存する

JavaScript では、データを保存するオブジェクトを作成できます。データをプレーン テキスト形式でオブジェクトに保存し、必要に応じてオブジェクトから取得できます。

＃＃＃文法＃＃＃

ユーザーは JavaScript を使用して、次の構文に従ってデータを DOM に保存できます。

リーリー

上記の構文では、データを保存する data_obj オブジェクトを作成し、その値を更新できます。

＃＃＃例＃＃＃

以下の例では、2 つの入力フィールドを持つフォームを作成します。さらに、各入力フィールドに名前を付けました。ユーザーがデータ保存関数をクリックするたびに、storeInDOM() 関数が呼び出され、入力値を取得してオブジェクトに保存します。ユーザーが「保存データの取得」ボタンを押すたびに、getFromDOM() 関数が呼び出され、data_obj オブジェクトからデータにアクセスします。

リーリー

出力では、ユーザーは保存されたデータを確認できます。

jQuery を使用して DOM にデータを保存する

jQuery にはデータ API が含まれており、data() メソッドを使用して呼び出すことができます。特定の要素のデータを保存できます。 2 つのパラメーターをデータ API に渡すと、特定の要素のデータが保存され、それ以外の場合は、特定の要素に保存されたデータが返されます。 ＃＃＃文法＃＃＃

ユーザーは、Jquery の data() メソッドを使用して、次の構文に従って DOM にデータを保存できます。 リーリー

CSS 識別子は、上記の構文で要素を選択するために使用されます。 data() メソッドは、最初のパラメーターとしてキーを受け取り、2 番目のパラメーターとして関連する値を受け取ります。

＃＃＃例＃＃＃

フォームには、次の例のように電子メールとパスワードの入力フィールドが含まれています。ユーザーがデータを保存するボタンを押すたびに、Jquery を使用して入力された値を取得し、data() メソッドを使用して特定の要素の DOM に値を保存します。ここで、$("#email").data("email", email) は、email と等しい ID で入力にアクセスし、「email」をキーとして、入力値を「email」キーの値として保存します。

したがって、data() メソッドを使用して、任意の要素を参照としてキーと値のペアを保存できます。また、ユーザーはデータにアクセスするときに同じ要素を参照として使用する必要があります。

リーリー

ユーザーは DOM にデータを保存する方法を学びました。ただし、DOM にデータを保存するのは一時的なものであるため、悪い習慣です。ユーザーはブラウザのローカル ストレージまたはセッション ストレージを使用してデータを保存でき、構文は簡単です。

JQuery では、ユーザーはデータ API を使用して特定の要素のデータを保存できます。 JavaScript では、ユーザーはすべてのデータを 1 つまたは複数のオブジェクトに保存する必要があります。

以上がデータを DOM に保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。