javascript - Web ページから要素を保存して読み込む

Question

私の Web ページには、動画やその他のメディアなどの一連の要素があります。

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

だから今、私の問題は、これらの要素をイベントとともに保存したいということです。そして、この要素を（私のWebページに）ロードできるようにしたいので、それらを再度変更し続けます。この場合、どのように保存/ロードできますか?