bigskysoftware / bigskysoftware/htmx

Clearing history cache after certain requests?

Open
#3,193 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

### 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](https://htmx.org/docs/#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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.