Ajaxで読み込んだデータがブラウザバックで消えないようにする

例えば今Qiitaでブラウザバックすると「もっと見る」で出していた部分が一覧画面から消えてしまうと思います。
そういった問題の簡単な対策を紹介します。

概要

受信したデータを隠しフォーム要素にJSON形式で入れておくことで、ブラウザのフォーム入力値の復元機能を借りてデータを復元します。

実装イメージ

1. 適当な隠しフォーム要素を用意する

<form style="display:none">
<textarea id="tmpStorage"></textarea>
</form>

TEXTAREA要素でなくても良いのですが、デバッグついでに表示したりするのでTEXTAREAを使っています。

2. ページ表示時、隠しフォーム要素のJSONを受信データとして扱い、画面を構築

3. Ajaxでデータ取得

4. JSONシリアライズして隠しフォーム要素に保存

5. 画面へ反映

既存コードに上記「1」「2」「4」の数行足すだけで実現できますので、費用対効果は良いんじゃないでしょうか。

動作サンプル