さて、私はローカルストレージを使用してサイズ変更された要素を保存することに取り組んできました
ページをロードすると、UI コードがサイズ変更 div に追加されます。最初は要素のサイズを変更できますが、保存してページを更新すると、サイズ変更UIコードが再度追加され、要素が壊れます。保存する前に置換を実行できることはわかっていますが、他にもっと効率的な方法があるかどうか疑問に思っていました。
コードが複数回追加されました。
http://jsfiddle.net/code_cookies/Spkzq/95/
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>
JS:
if (localStorage.pins === "") {
$('#draggable').html('<div id="image"class="resize" style="padding:20px; width:200px; height:200px; background-color:white;"><img class="" width="100%" height="100%" src="http://i48.tinypic.com/31368e9.jpg"/></div>');
}
else {
$('#draggable').html(localStorage.pins);
}
$("#image").resizable();
$('#save').click(function() {
localStorage.pins = $('#draggable').html();
});