How to re-render the page while preserving the classes of the objects?

Question

JavaScript

The question is difficult.
The site has implemented a treeview, in each tab there is some detail, the modification of which the user can change. Modification changes are made by submitting a form with the modified modification to the server.
The problem is that when submitting the form, a request is made to the address of the handler, then back to the page with the treeview. Standard scheme. But in this case, my treeview "folds" back, which causes a number of inconveniences to the user. It would make sense to submit forms using AJAX. Yes, this method will allow you to send part of the forms in this way. But, for example, when adding a 'property' to the modification of some detail, the page must be re-rendered using Jinja2 tools (so that the new property appears on the page in the desired form and can be changed)
How can I make it so that when submitting a form, as a result of which the page was re-rendered, my treeview does not collapse?
The principle of operation of treeview is standard, given, for example, on the W3C portal . Any options like

window.location.reload();
window.location.href = "/panel";

also 'fold' the tree, zeroing out its classes.

Answer 1

You can store interface state with sessionStorage or localStorage. More about them here: https://learn.javascript.ru/localstorage

Answer 2

Store the state of the tree in localstorage and retrieve it from there when the page is reloaded.
But it's better, of course, to get rid of the reboot in principle.

Answer 3

Once it collapses on change, then expand it back. When expanding, you can save the paths to the branches, and then programmatically bypass and expand. If you want it to open after page refresh, you can store the data in localStorage.
You can not save the path, but store only the identifiers of the expanded elements, it's easier.