使用post-redirect-get的自更新表单的历史记录已损坏

Question

我有一个URL /books，其中列出了一些书，还有一个URL模式/books/{some-book-title}，它显示了书的元数据的视图/更新形式。这是一个典型的用户案例，其中用户纠正了不正确的作者条目：

GET /books

  <a href="/books/ulysses">Ulysses</a>
  <a href="/books/don-quixote">Don Quixote</a>

GET /books/ulysses

  <form action="/books/ulysses" method="post" enctype="application/x-www-form-urlencoded">
    <input name="author" value="Jamessss Joycessss">
  </form>

POST /books/ulysses FORMDATA author=James+Joyce

  Redirect 303 SEE OTHER location = /books/ulysses

GET /books/ulysses

  <form action="/books/ulysses" method="post" enctype="application/x-www-form-urlencoded">
    <input name="author" value="James Joyce">
  </form>

问题在于历史记录堆栈现在

• /books
• /books/ulysses
• /books/ulysses

因此，当用户按下“后退”时，他们不会返回到/books，而只是刷新当前页面。是否有非JavaScript方法来处理更新案例，以便后退按钮具有预期的行为？如果没有，那么解决此问题的JavaScript方法是什么？

编辑：如果您多次发布，则更加令人困惑

GET /books
GET /books/ulysses    author=Jamesss Joycesss
POST author=3  ->  redirect shows author=3
POST author=2  ->  redirect shows author=2
POST author=1  ->  redirect shows author=1
Press back button /books/ulysses shows author=1
Press back button /books/ulysses shows author=2  (!!!)
Press back button /books/ulysses shows author=3  (!!!)
Press back button /books

Answer 1

修改后退按钮行为的 JavaScript 方法是使用历史API

这是转到历史堆栈第一页的快速方法。只需为后退按钮添加事件侦听器并使用历史 API。

window.history.go(0);

查看 API：https ://developer.mozilla.org/en-US/docs/Web/API/History_API