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

Question

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

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

问题：如何确保呈现的页面 'stored' 在用户的浏览器中并且仅在内容发生有意义的变化时才重新加载？

请问这个高层次的问题...3 个月前刚开始学习编程。 :) 将不胜感激任何关于从哪里开始看的方向性建议。

Answer 1

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

您可以使用 javascript 手动 add/remove 一个 css class 到不同的页面元素，如下所示

.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。这也意味着您需要将您想要 "stored" 的所有内容放在一个 html 文件中。我认为大多数 SPA JS 框架会做类似 "example.com/#/contact" 或 "example.com/#/about" 的事情，其中包含主题标签，这样 url 可以帮助用户查看他们所在的页面。

希望对您有所帮助！

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

Web development: How to 'store' pages in the browsers and prevent them from reloading every time when navigating between them

javascript

node.js

express

routing

navigation