Clearing history cache after certain requests?

[WattsUp]

The Problem

In multiple project I have a page of items and a page to edit them. When pressing back after an edit the page of items should be invalid and require a server fetch. This ensures the updates to the item are reflected on the page of all items.

List of actions and expected history cache behavior

• Visit page of items GET /fruit
• Visit page of an item GET /fruit/banana
• Back arrow to items /fruit: expect to use history cache. This works
• Forward arrow to item /fruit/banana: expect to use history cache. This works
• Edit item PUT /fruit/banana, also updates item page with OOB swap
• Back arrow to items /fruit: expect to not use history cache and issue new GET /fruit. This does not work
• Forward arrow to item /fruit/banana: expect to use history cache. This works
• Back arrow to items /fruit: expect to use history cache. This works

My Current Solution

In the response to a successful item edit, I return a script calling localStorage.removeItem('htmx-history-cache'). This implements the behavior I expect. However this is hacky since it isn't a public API of HTMX.

Question

Is there a better & existing method of solving this problem? I looked into what htmx says about caching and just Googling caching, back and forth history, etc.

Proposed Solution

If there isn't a better way of solving this then I propose a response header be added that will trigger a history clear.

HX-Cache-Clear: true This would do localStorage.removeItem('htmx-history-cache') or similar

[MichaelWest22]

https://htmx.org/attributes/hx-history/ There is an attribute you can place on an element in the problem pages and this will prevent the problem page being placed into history.

This is also an ideal candidate for a simple htmx extension which could for example perform removeItem during edit requests that have a hx-clear-history="/fruit" attribute set on them.

[Said-Ait-Driss]

https://github.com/Said-Ait-Driss/saidaitdriss.me