WebStorageを使って入力Formデータの一次保管

　Web上でフォームデータを入力して入力項目が多い場合、途中で作業を中断したくなる場合がある。ブラウザを止めたり、電源を落とすと折角入力したデータが無くなり悔しい思いをする。こんなときのため入力データの「一次保管」できるWebページサンプルを作成してみた。

機能
• 入力データを自分のPCに保管(WebStorage)
• このページを開くと一次保管データの有無をチェック
• データがある場合「ロード」ボタンを表示し入力フォームにロード可能にする
• データ不要の場合「クリアー」ボタンで削除

---

実際のサンプル

Web Storage Sample(入力データ一次保管)

名前(漢字)：
なまえ(かな)：
住所：
TEL：

一次保管データ

なし

---

コード説明

//JavaScript部

//ページロード時のデータ有無チェック
window.onload = function(){
  checkStorage();
}
//データsave
function saveStorage(){
  var data = new Object();
  data['name'] = document.getElementById("name").value;
  data['kname'] = document.getElementById("kname").value;
  data['zyusyo'] = document.getElementById("zyusyo").value;
  data['tel'] = document.getElementById("tel").value;
  var jdata = JSON.stringify(data);
  var key = "WebStorageSample";  //データ識別のためページのtitleをkeyに
  localStorage.setItem(key, jdata);
  checkStorage();
}
//データ再ロード
function loadStorage(){
  var data = new Object();
  for(var i=0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
    if(key == "WebStorageSample") {
      var value = localStorage.getItem(key);
      data = JSON.parse(value);
      document.getElementById("name").value = data['name'];
      document.getElementById("kname").value = data['kname'];
      document.getElementById("zyusyo").value = data['zyusyo'];
      document.getElementById("tel").value = data['tel'];
      break;
    }
  }
  checkStorage();
}
//データ消去
function clearStorage() {
  localStorage.clear();
  checkStorage();
}

//データの有無チェック
function checkStorage(){
  var target = document.getElementById('msg');
  if(localStorage.length > 0){
    for(var i=0; i < localStorage.length; i++) {
      var key = localStorage.key(i);
      if(key == "WebStorageSample") {
        target.innerHTML = 'データが残っていますがロードしますか。<br><input type="button" value="ロード" onclick="loadStorage();">　　<input type="button" value="クリア" onclick="clearStorage();">';
        break;
      }
    }
  } else {
    target.innerHTML = "なし";
  }
}

//HTML部
  <h1>Web Storage Sample(入力データ一次保管)</h1><br>
  <span>名前(漢字)</span>：<input type="text" id="name"><br>
  <span>なまえ(かな)</span>：<input type="text" id="kname"><br>
  <span>住所</span>：<input type="text" id="zyusyo"><br>
  <span>TEL</span>：<input type="text" id="tel"><br>
  <input type="button" value="一次保管" onclick="saveStorage();">
  <fieldset>
    <legend>一次保管データ</legend>
    <div id="msg">なし</div>
  </fieldset>

コメント 2

webstorageの面白い使い方ですね。
by お名前（必須） (2017-01-11 17:36) 

面白い使用方法ですね。
by Okute (2017-01-12 10:07)