#刷新后返回同屏答案

【问题标题】：#Return same screen after refresh#刷新后返回同屏
【发布时间】：2021-12-31 06:10:42
【问题描述】：

我正在开发一个使用 ajax 请求来读取 JSON 文件的页面，我正在显示它通过循环点击但是当我刷新页面时，它返回到第一个屏幕之后无论如何都会返回相同的屏幕我刷新请不要JQUERY

【问题讨论】：

欢迎来到 SO。当涉及到asking a good question 和这个question checklist 时，您可能会发现阅读网站help section 很有用。您为解决问题而编写的代码应包含minimal reproducible example，并包含在您的问题中。
当然，当您重新加载页面时，数据会消失，因为您在页面加载期间没有获取它们。除非在 ajax 调用期间您将修改数据库，以便在页面加载期间，系统可以检测到数据库中的更改，以便决定显示这些数据。

标签： javascript ajax reload

【解决方案1】：

在这里，我制作了一个“框架”，用于维护您页面的统计信息。

AJAX 请求发生在 URL 中的哈希更改时（此处状态为“state1”：http://example.org/#state1）。有一个hashchange 事件的事件监听器和一个函数fetshdata()。

当点击“获取数据”按钮时，哈希值会发生变化，hashchange 事件会发生，函数fetshdata() 会被调用。

如果页面被重新加载（这是您的问题），页面的“状态”会保存在散列中（散列仍然在 URL 中）。为了欺骗hashchange 事件，我“手动”创建了 hashchange 事件并将其发送到窗口。

页面的状态也可以保存在 localStorage 中，但是在 URL 中使用哈希的好处是哈希更改成为浏览器历史的一部分，您可以保存/发送/链接到 URL 等。

const data = 'data:application/json;base64,W3sidGl0bGUiOiJJdGVtIDEifSx7InRpdGxlIjoiSXRlbSAyIn0seyJ0aXRsZSI6Ikl0ZW0gMyJ9XQ==';

var content;

const fetchdata = hash => {
  let url = hash; //use the hash as part of the AJAX request (not implemented)
  fetch(data).then(res => res.json()).then(json => {
    content.innerHTML = '';
    json.forEach(item => {
      content.innerHTML += `<p>${item.title}</p>`;
    });
  });
};

document.addEventListener('DOMContentLoaded', e => {
  content = document.getElementById('content');
  document.getElementById('btn_load').addEventListener('click', e => {
    location.hash = 'newstate';
  });
  
  document.getElementById('btn_reload').addEventListener('click', e => {
    location.reload();
  });
  
  if(location.hash){
    let event = new Event('hashchange');
    window.dispatchEvent(event);
  }
});

window.addEventListener('hashchange', e => {
  let hash = location.hash.substring(1);
  fetchdata(hash);
});

<button id="btn_load">Get data</button>
<button id="btn_reload">Reload</button>
<div id="content"></div>

【讨论】：