跨页面加载持久化元素

请考虑以下情况：想象一下，你是社交媒体网站的开发者，该网站允许用户与其他用户成为朋友，并使用 turbolink 来加快页面加载速度。在网站上每个页面的右上角，有一个数字表示用户当前拥有的朋友总数。想象一下，你正在使用你的网站，并且你有 3 个朋友。每当添加新朋友时，你都会运行一些更新朋友计数器的 JavaScript。想象一下，你刚刚添加了一个新朋友，并且你的 javascript 正常运行并更新了页面右上角的朋友计数，现在渲染为 4.现在，假设你单击浏览器的后退按钮。当页面加载时，即使你有四个朋友，你也会注意到好友计数器显示 3。

这是一个相对常见的问题，并且 turbolinks 提供了解决方案。出现问题的原因是，当用户单击后退按钮时，turbolink 会自动从缓存中加载页面。缓存页面不会始终使用数据库进行更新。

要解决此问题，请假设你在 id 为“friend-count”的<div>标记内呈现好友数：

<div id="friend-count" data-turbolinks-permanent>3 friends</div>

通过添加 data-turbolinks-permanent 属性，你可以告诉 turbolinks 在页面加载中保留某些元素。在官方文件说 ：

通过为其提供 HTML ID 并使用 data-turbolinks-permanent 对其进行注释来指定永久元素。在每次渲染之前，Turbolinks 会通过 id 匹配所有永久元素，并将它们从原始页面传输到新页面，从而保留其数据和事件侦听器。