Sisyphus.jsで未送信フォームを自動保存！入力ミスもリロード事故も怖くないUIへ

7月 4, 2025 7月 4, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

こんな経験はありませんか？

「せっかくフォームに入力した内容が、リロードや誤操作で消えてしまった…」

今回はそんなトラブルを解決してくれるライブラリ、Sisyphus.js（シシュフォス）をご紹介します。

ユーザー体験を高める“地味にすごい”改善ポイントとして、導入しておいて損はないテクニックですよ！

Sisyphus.jsとは？

Sisyphus.jsは、フォームの未送信データを自動的にブラウザのローカルストレージに保存し、ページを離れて戻ってきたときに入力内容を復元してくれるJavaScriptライブラリです。

フォームに入力中、うっかりリロードしたり「戻る」ボタンを押したりしても、データが消えずに復元されるという、ユーザーにやさしい体験を実現できます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

基本の使い方

1. ライブラリを読み込む

Sisyphus.jsは軽量なので、CDNから簡単に読み込めます。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/sisyphus.js/1.1/sisyphus.min.js"></script>

2. jQueryと連携して有効化

jQueryに依存しているので、jQuery本体も必要です。

 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

$(function () {
    $("form").sisyphus();
  });

たったこれだけで、フォームの入力内容が自動的に保存・復元される仕組みが完成します。

3. 複数フォームがある場合はセレクターで指定

 $('#contact-form, #entry-form').sisyphus();

便利なオプション

Sisyphus.jsは、細かいカスタマイズも可能です。
以下は代表的なオプションです。

$("form").sisyphus({
    timeout: 10,
    // 保存間隔（秒）
    locationBased: true, // URLごとに保存する
    autoRelease: true, // 送信後に保存データを自動削除
    onSave: function () {
      console.log("保存されました");
    },
    onRestore: function () {
      console.log("復元されました");
    },
    onRelease: function () {
      console.log("送信されたので削除します");
    },
  });

これを使えば、送信後のクリア処理や保存通知なども柔軟にコントロールできます。

導入時の注意点

jQuery依存なのでモダンJS環境では扱いにくいことも
保存先はローカルストレージなので、ユーザーのブラウザ環境に依存
大きすぎるデータは保存できない（ローカルストレージの容量制限）
セキュリティ上、パスワード入力欄には非対応

たとえばWordPressなどjQueryベースのフォームが多いサイトではすんなり導入できますが、VueやReactなどでは代替方法の検討が必要です。

代替案：Vanilla JS で自作するなら？

最近はjQueryを使わず、バニラJavaScriptで同様の挙動を自作することも増えています。

たとえば以下のように、フォーム入力を localStorage に保存・復元できます。

// 保存
  document.querySelector("form").addEventListener("input", (e) => {
    localStorage.setItem("draft", JSON.stringify({ name: document.querySelector("#name").value, email: document.querySelector("#email").value }));
  });
  // 復元
  window.addEventListener("DOMContentLoaded", () => {
    const saved = JSON.parse(localStorage.getItem("draft") || "{}");
    if (saved.name) document.querySelector("#name").value = saved.name;
    if (saved.email) document.querySelector("#email").value = saved.email;
  });

よりモダンなアプローチが必要な方には、こちらの自作もおすすめです。