Add anything you want to keep to it, store it in the window with window.app = {}
You can mix local storage in with it too if you want to write a class that checks its existence with a key.
Why must state management need a complex solution?
I’m sick of frameworks and modes where they abstract away the simplicity of javascript in favor of their way which is very economically driven.
Some state does change a lot, and for that: sure. But if you just have currently logged in user or some such (which is quite often the case): meh, it just seems like a complex way to set a global variable.
This week I spent some time removing the Vuex state management in favour of window globals and it made everything a lot simpler and the bundle size a lot smaller (the other option would be to migrate to Pinia, which is significantly smaller than Vuex, but then I'd probably have to update to the next incompatible version in 2 years, and this seemed more robust).
However, you could attach event handlers for state change monitoring & propagation.
I’m curious to know how scalable an object GP described would be for UI state (assuming it needs monitoring & propagating)
Redux state is “just an object” that does shallow comparisons to trigger re-renders
window.getState(); window.setState();
You could even use document.querySelectorAll() to go through all the elements on your page, and update them based off values in the state, whenever window.setState() is called. This is basically all front-end frameworks in a nutshell. You've invented reactive programming in the browser.
But for a simple thing built with JS that isn’t going to need to scale to a large codebase or whatever, sure, keep it simple!
For anything non-trivial you'd have to add some kind of listener or tag to every node, find said node, and then update (ideally in a performative way). Said updates cannot destroy existing state, but must patch it. Updates must also not break existing attached event listeners. The list goes on and on.
I don’t know and can’t easily find out the time complexity of things like React setState(), but would hope that for frontend code bases where there is a build step(s) and/or for typed frontend languages we could achieve better than linear (especially if N is every element on the page)
Forgo, Mithril, and Crank all require explicit commands to rerender, unlike React and friends, which need visibility into everything that could ever trigger a rerender so they can handle it automatically.
You'd think manual rerenders would be a big pain, but I find it a small price for allowing by state to just be regular ol' variables. It makes everything feel simpler, like I'm just using the language instead of expressing my business logic through the framework.
There may be times when it's worth the cost, but otherwise just hang it on the global state and move on with your life.