从网页保存并加载元素

Question

我的网页上有一系列元素，例如视频或其他媒体：

<div id = "text">
</div>
<video height="240" width="412" id="video" controls="controls"> </video>

我用JavaScript更改了这些元素的原始状态并且我使用了 Popcorn.js用于创建同步事件，例如：

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',
});

所以现在，我的问题是我希望将这些元素与事件一起保存。 在我希望有可能加载（在我的网页中）这些元素后，继续再次更改它们。 在这种情况下如何保存/加载？