UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#163 数値が入力されるたびにローカルストレージに値を保存 JavaScript

記入日: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化のディレクションなどを行っています。