Javascript jQueryUI添加不必要的代码并破坏

好的，我一直在使用本地存储保存一个调整大小的元素

加载页面时，ui代码将添加到resize div。 首先，您可以调整元素的大小，但如果保存并刷新页面，则会再次添加调整大小的ui代码，这会破坏元素的大小。我知道我可以在保存之前运行replace，但我想知道是否还有其他更有效的方法

多次添加代码。

JS:

if（localStorage.pins==“”）{
$（'#draggable'）.html（''）；
}
否则{
$（'#draggable'）.html（localStorage.pins）；
}
$（“#图像”）.resizeable（）；
$（“#保存”）。单击（函数（）{
localStorage.pins=$（'#draggable'）.html（）；
});

通过调用

destroy

，您可以删除jquery UI添加的所有内容：

$("#image").resizable( "destroy" );

使用此方法的Fiddle（即将用它回答：）

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();
});

$("#image").resizable( "destroy" );