Web开发：如何在浏览器中"存储"页面，并防止它们在每次在它们之间导航时重新加载

Question

我是Web开发的新手，正在使用纯JS创建一个Web应用程序。我正在使用Firebase和Express.js路由来实现后端功能。这是一种简单的博客服务，因此页面之间自然有很多导航。

当前问题：每当用户在页面之间来回移动时，页面每次都会刷新，即使没有任何更改也是如此。这是 2020 年关键的用户体验问题。我想这是因为我为每个 URL 请求发送一个 html 文件，但不知道解决方法是什么。

问题：如何确保呈现的页面"存储"在用户的浏览器中，并且仅在内容发生有意义的更改时才重新加载？

请原谅高级问题...3个月前才开始编程。:)将不胜感激任何关于从哪里开始寻找的方向建议。

Answer 1

所以这就是JS框架将帮助您制作SPA应用程序的地方。基本上，当用户首次点击您的应用时，会加载所有页面，然后动态显示/隐藏不同的页面以避免页面刷新。

您可以使用javascript手动添加/删除css类到不同的页面元素，如下所示

.hidden {
display: none;
}
<div class="hidden">
...page 1 (not shown)
</div>
<div>
...page 2 (shown)
</div>
<div class="hidden"
...page 3 (not shown)
</div>

这是一个轻量级且简单的解决方案，但请记住，这不会更改任何 url。这也意味着您需要将所有要"存储"的内容放在一个html文件中。我认为大多数SPA JS框架都会对其中的主题标签做一些类似"example.com/#/contact"或"example.com/#/about"的事情，这样URL可以帮助用户查看他们在哪个页面上。

我希望这有帮助！