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 可以帮助用户查看他们所在的页面.

我希望这会有所帮助！