JavaScript を使用して、選択したチェックボックスを別のページに表示しますか?

この記事では、JavaScript を使用して他のページのすべてのチェックボックスを取得する方法を学習します。チェックボックスは選択タイプであり、true または false の 2 値選択タイプです。これはページ上に表示される GUI 形式のオプションであり、これを使用してユーザーからさらに多くの入力を得ることができます。ボックスがチェックされている場合は True、つまりユーザーが値を選択していることを意味します。チェックされていない場合は、ユーザーが値を選択していないことを意味します。

チェックボックスとラジオボタンの違いは、ラジオボタンを使用する場合、ユーザーは値を 1 つだけ選択できるのに対し、チェックボックスを使用する場合、ユーザーは複数の値を選択できることです。

チェックボックスの例

リーリー

上記の出力から、ボックスがチェックされていることがわかります。これは、ユーザーが値を選択したことを示しています。

JSON.parse() メソッドは常に文字列形式の引数を受け取ります (つまり、値を一重引用符で囲む必要があります)。

＃＃＃例＃＃＃

プログラムの例を見てみましょう:

リーリー

出力から、アラート メッセージで指定された選択されたチェックボックスが同じページに印刷されていることがわかります。その前に、まずローカル ストレージの概念を理解しましょう。

JavaScript でのローカル ストレージの使用

LocalSorage は、Web ブラウザーのデータ ストレージの一種です。この Web サイトを使用してデータを保存でき、データは常にストレージに残り、ブラウザを閉じても消えることはありません。

もう 1 つのオプションは Cookie で、これもサイト データの保存に使用されます。このストレージ制限は約 2 です。ブラウザでは 2MB ですが、localStorage には 5MB のストレージが付属しており、Cookie のストレージ サイズの点でこれより大きくなります

localStorage を効果的かつ安全に使用するには、ユーザーはいくつかの用語を覚えておく必要があります。

は、パスワードやユーザーが公に共有すべきではないその他の情報などの機密データを保存する場合、安全ではありません。
データはサーバーではなくブラウザ自体に保存されますか?また、その操作は同期的です。つまり、1 つの操作が次々と順番に処理されます。
Cookie のストレージ サイズと比較して、ストレージ データ容量が大きくなります。
最近のほとんどすべてのブラウザがこれをサポートしており、最新バージョンと互換性があります。
LocalStorage ブラウザの互換性を確認する

ブラウザが localStorage をサポートしているかどうかを確認するには、ブラウザ コンソールで次のコードを実行します。定義されていない場合は、ブラウザが localStorage をサポートしていることを意味します。

＃＃＃例＃＃＃ リーリー

使用されたlocalStorageメソッド

＃＃＃１。 setItem()

このメソッドは、ストレージにデータを追加するために使用されます。このメソッドにキーと値を渡してデータを追加します。

リーリー ＃＃＃２。 GetItem()

このメソッドは、ストレージ内に存在するデータを取得または取得するために使用されます。キーをこのメソッドに渡して、そのキーに関連付けられた値を取得します。

リーリー ＃＃＃３。削除項目()

このメソッドは、ストレージ内に存在する特定のデータを削除するために使用されます。このメソッドにキーを渡すと、ストレージ内にデータとして存在するキーと値のペアが削除されます。

リーリー ＃＃＃４。クリア（）＃＃＃

このメソッドは、ストレージ内に存在するローカル ストレージ データをクリアするために使用されます。

リーリー

ヒント: localStorage のサイズを確認するには、ブラウザ コンソールで次の構文を実行できます。 リーリー

この値を別のページに送信してみましょう。まず、setItem() を使用して選択したすべてのチェック値をローカル ストレージに追加し、次のページで getItem() メソッドを使用して値を取得します。

ローカル ストレージに価値を追加する JavaScript 関数は

になります。 リーリー

ここでは、items 変数内のすべてのチェックボックス項目を取得し、arr 配列に、true とマークされたすべての項目を追加して、ユーザーが選択したことを示します。そしてアレイをローカルストレージに追加します。

2 ページ目のストレージから値を取得する JavaScript 関数

リーリー

ここでの配列 arr には、キー値とともにストレージから取得した値が格納されます。 selected item という名前の空の文字列変数を取得し、すべての配列項目を追加します。最後に、id の結果をその場所に出力します。

page1.html

リーリー

page2.html

リーリー

出力から、最初のページ page1.html にすべての項目が表示され、ユーザーが選択されたリストから項目を選択すると、選択されたすべての値が値のキー名とともにストレージに追加されることがわかります。 。ユーザーが送信ボタンを押すと、次のページ (page2.html) にリダイレクトされます。 2 ページ目では、プログラムはキー値を使用してユーザーが選択した値をストレージからフェッチし、配列をループして最終値を追加して出力します。

以上がJavaScript を使用して、選択したチェックボックスを別のページに表示しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。