23
25

More than 5 years have passed since last update.

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

Posted at

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

概要

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

実装イメージ

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

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

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

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

3. Ajaxでデータ取得

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

5. 画面へ反映

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

動作サンプル

23
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
25