Manage state in dynamically created DOM

See more:

Javascript

DOM

state

Hi there. Working on an extension where DOM trees has to be created on the fly. For example, I have a list of icons, all in #grid2 and upon clicking an icon, the corresponding content is expected to display in #grid1 .

But managing state across icons’ DOM contents and sub-contents is a struggle. For example, a user leaves Icon A after reaching its second view (sub content/another layer in the DOM) to click Icon C before returning back to Icon A. I want them to able to continue from Icon A’s second view where they initially left in that session. I tried to persist DOM state with localStorage but it only works for strings.

Here is the code.

What I have tried:

localStorage.setItem('retainView', grid1.innerHTML);