This is where Turbo Permanent comes into play. It allows you to instruct Turbo not to re-render an element but to retain the current DOM element from the previous page. However, it’s not as simple as slapping a `turbo:permanent` attribute on an element.
<div id="cart-count" data-turbo-permanent>1</div>
When an element is marked as turbo permanent, turbo will look for an element on the new page with the same ID, and as long as they are both marked permanent, then Turbo will keep the DOM element from the previous render in place of the 'new' element. This works for cached elements and for new elements from the server.
This poses a challenge when you need to update that element from the server. To address this, we turned to a trusty Stimulus controller to dynamically append the turbo permanent attribute to the element on Stimulus connect. By doing this, we ensured that if the server sends data for this attribute, it will replace the data in the page. But, when the element is being restored from the Turbo cache, it will be ignored, allowing us to maintain that precious cart state.