Question

I have a <div id="populated"> element on the page which receives dynamically created content, including populated DIVs, text areas, input texts and check boxes. Moreover, there are some elements with addEventListener.

My question is: how to save this “populated” DIV and reload it when a user returns to the page?

What I’ve tried, by using localStorage:

• Save the entire DIV as a serialised object (got tips from here). Problem: “Uncaught TypeError: Accessing selectionDirection on an input element that cannot have a selection.”

• Save the entire DIV as innerHTML. Problems: 1) bind events are lost 2) already entered data in textareas/inputs is lost.

I can rebind the events, but parsing the DIV structure and storing/restoring .value for each element seemed too complicated.

I’m using “pure” JavaScript (no frameworks) and without AJAX. Any ideas, keywords?

Answer 1

It took some redesign, but I managed to solve the problem:

1. The structure of the DIV is stored as innerHTML on onpageonload in localStorage.
2. The values of the fields inside the DIV are serialised and stored in localStorage.
3. The binding function is independent and can be called so it parses the whole DIV.

On onbeforeunload the scrips goes through the DIV as saves the “inner HTML” and the values. While loading, the scripts checks if localStorage is empty: if not, populates the DIV, loads the values and rebind the events.