Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
This may be a quick one today, but the next in the advanced attributes is h x history. And the usage of this is easy. There's not a ton of options, it's just hx history equals false. And you can put that anywhere on the page to make it work. But what it is and why you'd want to do it, I think requires a little bit of background.
Lazarus:So as you're browsing around and clicking links within your site and back buttons and whether it's h t m x or not, your browser is keeping a local storage of your history. So that's why, you know, sometimes when you hit the back button, you go somewhere, you hit the back button, the page is just immediately there. It didn't go back to the server. It didn't load anything. Your browser has the page stored in its local storage, just available in the history.
Lazarus:So of course when you're loading from ajax and you're loading bits of the site that causes some issue with the back button. HTMLX has already given a lot of, thought to this, and given you tools to use the, you know, push to the URL bar. HTML takes a snapshot of your site in its different phases, so that when you hit the back button it can, keep that history. It adds to the history as you add stuff to the site, so that you can hit the back button and see a previous iteration, even though it was loaded through ajax and not through a regular link. So this is h t m x helping you out with the history in your browser.
Lazarus:It adds the snapshot to your browser local storage history, lets you push URL to the top, It's all good stuff. 95% of the time that's what you want. You're done. But what if there's something about your site that you don't want saved in your browser's local storage? So h t m x has a special attribute for that.
Lazarus:That's that's what the HX history is, and it's kind of an unusual one, but you can put it anywhere on the page, just hx history equals false. Anywhere. And then the whole page will not be saved in the local storage. So it's not just the element that it's on, it's like you can you don't just like isolate 1 div and say I don't want this to be stored in the history, and you put it on that. No.
Lazarus:It's gonna take the it it basically blocks the entire DOM, the entire, you know, body of it from being stored in the, local storage in your browser's history. Even if just even if it's just a tiny snippet loaded. So if you did, you know, an h x get, and you filled in one tiny place, but you included h x history equals false in that div that was loaded, that entire page will now be left out of your browser history. So what does that mean? Not a ton in terms of functionality, because the history is still gonna work as normal.
Lazarus:It's just not keeping it in the local storage as a convenience, you know, to to like load faster when you hit the back button. So you can still go back. You can still push URLs like normal, but when you hit the back button it's going to use the URL to reload the whole thing from the server. If h x history equals false was set in there. So this is an advanced feature not because it's hard to use, but it's just unusual.
Lazarus:So why why would you need to keep things out of local storage? It's kind of an unusual request, but you know some people just want to be kind of extra careful. Maybe it's a certain part of their sites, Maybe they require maybe their site is something that is used in public places and you know, you want to make sure that if the person forgot to log out or something, they can't go back and, you know, if they left their session there or something like that, someone just can't go back a bunch of times and go through the local storage and find their, you know, it's gonna force it to load from the server every time. So if that user is logged out, that kind of thing. So the reasons for this are a little unusual.
Lazarus:But it's just whatever your reasons are, it's an easy one to use. Just add the h x history equals false to anywhere there, and your entire page won't be cached into the local storage, but it will still be accessible, using the back button and using the history.