記入日:2023-06-20 編集日:2023-06-20
数値が入力されるたびにローカルストレージに値を保存する方法を解説してみようと思います。
この記事を読むと(約5分)
数値が入力されるたびにローカルストレージに値を保存する方法をイメージできます。
以下に、5つの数値入力フィールドがあり、入力されるたびにローカルストレージに値が保存される例を示します。
また、特定のボタンが押された際にローカルストレージの値がクリアされるコードも含めています。
HTML:
<input type="number" id="input1"> <input type="number" id="input2"> <input type="number" id="input3"> <input type="number" id="input4"> <input type="number" id="input5"> <button type="button" onclick="clearLocalStorage()">クリア</button>
JavaScript:
// 入力フィールドのIDリスト const inputIds = ['input1', 'input2', 'input3', 'input4', 'input5']; // ローカルストレージに値を保存する関数 function saveToLocalStorage() { for (let i = 0; i < inputIds.length; i++) { const inputId = inputIds[i]; const inputValue = document.getElementById(inputId).value; localStorage.setItem(inputId, inputValue); } } // ローカルストレージの値をクリアする関数 function clearLocalStorage() { for (let i = 0; i < inputIds.length; i++) { const inputId = inputIds[i]; localStorage.removeItem(inputId); document.getElementById(inputId).value = ''; } } // ページが読み込まれた時にローカルストレージの値を復元する処理 window.onload = function() { for (let i = 0; i < inputIds.length; i++) { const inputId = inputIds[i]; const storedValue = localStorage.getItem(inputId); if (storedValue) { document.getElementById(inputId).value = storedValue; } } } // 入力が変更されるたびにローカルストレージに値を保存 for (let i = 0; i < inputIds.length; i++) { const inputId = inputIds[i]; const inputElement = document.getElementById(inputId); inputElement.addEventListener('input', saveToLocalStorage); }
このコードでは、5つの数値入力フィールドがあります。 入力フィールドの値は変更されるたびにローカルストレージに保存されます。 また、"クリア"ボタンが押されると、 ローカルストレージの値が削除され、入力フィールドの値もクリアされます。 ページが読み込まれた時には、 ローカルストレージの値が復元され、入力フィールドに表示されます。
SQLの使いどころ
サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。
SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。
また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。
KK
機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。