javascript - 使用history.back时保留AJAX生成的内容

Question

我有一个页面，其中进行 AJAX 调用，完成后会返回图像链接以及其他数据。数据被填充到输入字段和一个新的 <img>为图像链接生成标签。

但是，如果我离开页面并调用 history.back(1) ，输入数据保留，但图像不保留。有没有办法在调用 history.back(1) 时保留生成的标签？

Answer 1

您可以使用localStorage通过页面的 session 历史记录来存储数据。

当AJAX成功完成后，图像数据就可以存储在本地存储中。例如，如果您要将这些数据存储在变量 imageData 中，请将其保存在名为 image 的键中:

// successful AJAX
localStorage.setItem('image', imageData);

然后，使用监听器 (.onpopstate) 来检查 session 历史记录何时发生更改。
这样，您就可以重新生成标签了。

window.onpopstate = function() {

  let imageStorage = localStorage.getItem('image');

  if (imageStorage != null) {
    // regenerate tags
  }
}