Проблема с сохранением изменений в Stickies?

Question

zeni1agent @zeni1agent

JavaScript

Проблема с сохранением изменений в Stickies?

Я пытаюсь создать инструмент для сохранения на страничке заметок
И у меня есть во такой код
Взял я его из этого туториала

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>HTML 5 complete</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="/resources/demos/style.css">
	
	<link rel="stylesheet" href="default.css" />
	<link rel="stylesheet" href="stickies/stickies.css" />
	 
</head>
<body>
<article>
<img src="1.jpg">
</article>

<div id="hint-add"></div>
<div id="hint-container"></div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="stickies/stickies.js"></script> 
<script> STICKIES.open(); </script>
	
<script type="text/javascript">
document.write('<form name="form1" method="POST"><textarea name="js_exp_php_ise" class="note_textarea_ise"><div  class="note_div_ise">');
	youf.forEach(function(element) { 
	document.write(element );
});
document.write('</div></textarea><input type="submit" value="Отправить"></form>');
</script>	
<?php if ($_POST ['js_exp_php_ise']){ echo $_POST ['js_exp_php_ise']; } ?>
</body>
</html>

stickies.js

var youf = [];
var STICKIES = (function () {
 var initStickies = function () {
		$("<div />", { 
			text : "+", 
			"class" : "add-sticky",
			click : function () { createSticky(); }
		}).prependTo(document.getElementById( 'hint-add')); 
		initStickies = null; 
 },
 openStickies = function () {
	 	initStickies && initStickies(); 
		for (var i = 0; i < localStorage.length; i++) {
			createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));
		}
 },
 createSticky = function (data) { 
	 	data = data || { id : +new Date(), top : "40px", left : "40px", text : "Note Here", width: '100px', height: '100px'}		
	 var content_zametki =  $("<div />", { 
			"class" : "sticky",
			'id' : data.id
			 })
		.prepend($("<div />", { "class" : "sticky-header"} )		
				.append($("<span />", { 
					"class" : "sticky-status", 
					text : "status",
					click : saveSticky 
				}))
				.append($("<span />", { 
					"class" : "close-sticky", 
					text : "Х", 
					click : function () { deleteSticky($(this).parents(".sticky").attr("id")); }
				})))
			.append($("<div />", { 
				html : data.text, 
				contentEditable : true, 
				"class" : "sticky-content", 
				keypress : markUnsaved
 			})).resizable({				
			handle : "div.sticky-content", 
			stack : ".sticky",
			start : markUnsaved,
			stop  : saveSticky	
			})			
		.draggable({
			handle : "div.sticky-header", 
			stack : ".sticky",
			start : markUnsaved,
			stop  : saveSticky	
		 })
		.css({
			position: "absolute",
			"top" : data.top,
			"left": data.left,
			"width" : data.width,
			"height" : data.height		
		})
		.focusout(saveSticky)  ;			  
		content_zametki.appendTo(document.getElementById( 'hint-container'));
		
	var allHTML = $('<div>').append(content_zametki.clone()).html();
	youf.push(allHTML);	 
},
deleteSticky = function (id) {
	 localStorage.removeItem("sticky-" + id);
		$("#" + id).fadeOut(200, function () { $(this).remove(); }); 
 },
 saveSticky   = function () { 
	 var that = $(this),  sticky = (that.hasClass("sticky-status") || that.hasClass("sticky-content")) ? that.parents('div.sticky'): that,
				obj = {
					id  : sticky.attr("id"),
					top : sticky.css("top"),
					left: sticky.css("left"),
					width : sticky.css("width"),
					height: sticky.css("height"),
					text: sticky.children(".sticky-content").html()}			
		localStorage.setItem("sticky-" + obj.id, JSON.stringify(obj));	
		sticky.find(".sticky-status").text("saved"); 
 },
 markUnsaved  = function () {
	 var that = $(this), sticky = that.hasClass("sticky-content") ? that.parents("div.sticky") : that;
		sticky.find(".sticky-status").text("unsaved");
};
return {
 open   : openStickies,
 init   : initStickies
};
}());

Проблема заключается в том что через некоторое время пользования на страничке появляются три заметки которые невозможно удалить а новые не сохраняются
Раньше это было только в хроме но после и опера начала вести себя точно так же. Я проверил на фаерфоксе и там пока что все работает нормально но как мне кажется через время и он будет выдавать мне точно такой же баг
Я подозреваю что проблема в том что он сохраняет его в хранилище HTML5 и из за бага перестает его обновлять
при удалений saveSticky три лишних Stickies пропадают
есть ли у кого совет как решить данную проблему?

В дальнейшем я буду его хранить в метополе поста на php.
Поэтому подойдут любые решения как динамически можно сохранить(перебросить)
Всю информацию в $_POST

Вот пример кода на codepen