HTMLのformに自動保存機能を付けよう

October 01, 2018 (最終更新: February 20, 2023)

はじめに

なぜ自動保存機能を付けようと思い至ったかと申し上げますと、
先日、30分くらいかけて編集していたメモ(当サイト記事)を更新する時、ネットワークのエラーで送信に失敗**「書いていた内容を全喪失する」**という悲しい事故が発生いたしました。

これを受けまして、二度とこのような悲劇を起こすまいと、フォームに自動保存機能を付けるに至りました。

方法

思いつく方法としては

フォーム内に変更があったら、都度フォーム内のデータをサーバーに送信
一定時間が経過したら、フォーム内のデータをサーバーに送信

が考えられます。

どちらもJavaScriptで実現できそうです。

前者は、変更がある都度、データを送信しているとサーバーにもブラウザにも負荷がたかそうなので、後者の一定時間ごとにデータを送信する方法を採用しようと思います。

実装

今回はサーバー側の処理は割愛します。

以下ソースコードです。
HTML

<!DOCTYPE html>
<html>
<head>
  <title>form</title>
</head>
<body>
  <form method="post">
    <textarea name="text" id="text"></textarea>
  </form>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script>
  function autoUpdate() {
    var json_data = { text: document.getElementById("text").value };
    $.ajax({
      type: 'post',
      url: "アップデートを受け付ける用のURL",
      dataType: 'json',
      contentType: 'application/json',
      scriptCharset: 'utf-8',
      data: JSON.stringify(json_data),
    })
  }
  setInterval(autoUpdate, 60 * 5 * 1000);
</script>

</html>

先程示した通り一定時間(今回は5分)が経過したらサーバーにajaxでtextareaの内容を投げてます。
サーバーはこれを受け取ったらデータを更新します。
この実装ではsetIntervalを使って一定時間毎に自動で内容を送信するようにしています。
setIntervalではなくボタンを押したときに実行するようにすれば、ページの再読み込みなしで送信できるフォームを作成することも可能です。

終わりに

これで、悲惨な事故ともおさらばです。はぁ…最初からつけとけば良かった…