戻るボタン（ブラウザバック）による submit 2重実行を防ぐ

はじめに

タイトル通りです。
HTMLでsubmit実行後、別ページに遷移db値を登録をします。
登録完了後にブラウザの戻るを押すと再度submitが実行されて
2重にDBに登録されてしまう事象です。

google検索したのですが、意外な事に記事があんまりhitしませんでした。
解説記事が増えるということは、ユーザー側にはいいことなので記載します。

注）クリティカルな事象には向きません

動作確認環境

Windows 7(x64)
Internet Exploere 11

使った物

javascript を使いました。

HTML5の History API

addEventListener.js

<script type="text/javascript">
    history.pushState(null, null, null);

    window.addEventListener("popstate", function() {
        history.pushState(null, null, null);
    });
</script>  

動作結果

戻るボタンを押しても戻らなくなりました。

良い点

・chrome IE10,11 Firefox safari で利用可

欠点

・本当に戻るボタンが効かなくなる「だけ」
・戻るボタンの見た目は活性化したまま
・互換モードでIE9以前の場合は効かない
・submitの2重投稿そのものを防いでいるわけではない

根本的な解決使えそうな資料ない？

@syobochim さんのスライドはいかがでしょうか。

title:さいきょうの二重サブミット対策
https://qiita.com/syobochim/items/120109315f671918f28d

参考資料

https://hidari-lab.hatenablog.com/entry/2015/03/02/212818
https://developer.mozilla.org/ja/docs/Web/API/History