Save and load elements from webpage <p>I have in my webpage a series of elements, for example videos or other media:</p> <pre><code>&lt;div id = "text"&gt; &lt;/div&gt; &lt;video height="240" width="412" id="video" controls="controls"&gt; &lt;/video&gt; </code></pre> <p>I change with JavaScript the original status of these elements and I use Popcorn.js for create a synchronization events, for example:</p> <pre><code>var video = document.getElementById('video'); video.src = $("#url").val(); //Change src value var popcorn = Popcorn( "#video" ); popcorn.footnote({ //Create a synchronization event; I add a footnote start: 2, stop: 5, text: 'Hello World!!!', target: 'text', }); </code></pre> <p>So now, my problem is that I want save these elements with their events. And after I want to have the possibility to load (in the my webpage) this elements for continue to change them again. How can I save/load in this case?</p>