跨頁面載入持久化元素

請考慮以下情況：想象一下，你是社交媒體網站的開發者，該網站允許使用者與其他使用者成為朋友，並使用 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 匹配所有永久元素，並將它們從原始頁面傳輸到新頁面，從而保留其資料和事件偵聽器。