Javascript: Reusing a dynamically created DOM object on next page loads

Question

I have 20K+ values to display in a Combox Box. The HTML was getting huge so in order to reduce the HTML load time, I stored all the values in an array in localStorage. Next, I used javascript and dynamically added all options to that Combo Box. Till here every thing is fine, however now I want to even avoid the step of populating the combo box on every page load. What I want is to store the populated Combo Box DOM object somewhere and on every page load reuse that object. I have already tried localStorage but it's failing, probably because the list is too big (RnD to figure that out is going in parallel).

Is there any thing else I can utilize to cache dynamically formed DOM objects so that they can be used all across application on different pages with repeated re-loads without going through the pain of dynamically populating them over and over again.

Answer 1

1. Create a partial template html for the combobox,and precompile it. (Handlebars/Moustache)
2. Load the file dynamically on the first page
3. For the other pages, you can use this cached partial html