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

97
13 октября 2019, 09:10

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

<!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

Answer 1

Вроде бы я решил проблему с помощью замены localStorage на sessionStorage. Но пока сказать точно не могу буду проверять.

READ ALSO
Вывести денные отдельно для каждой даты
PHP

Вывести денные отдельно для каждой даты

Раньше даты и имена выводились в одной таблице, но появилась необходимость вывести денные отдельно для каждой даты

 140
WebSocket, ReactPHP
PHP

WebSocket, ReactPHP

Изучаю вебсокеты, конкретно библиотеку reactphp, в документации масса примеров сокет-серверов, но подключение к сокету идёт в основном через...

 112
Проблема с обработкой форм PHP
PHP

Проблема с обработкой форм PHP

Создал скрипт который должен реагировать на нажатие кнопки (с произвольным именем из 1 символа), однако при выполнении ничего не происходит...

 99
Вывод контента с разных страниц на PHP [закрыт]
PHP

Вывод контента с разных страниц на PHP [закрыт]

Всем привет, имеется данный код на PHP, который парсит контент с одной страницыА как вывести например, контент с разных страниц

 106