用于动态项目的 jQuery 本地存储答案

【问题标题】：jQuery localstorage for dynamic items用于动态项目的 jQuery 本地存储
【发布时间】：2021-06-06 05:27:48
【问题描述】：

我有一系列 jQuery 可拖动/可调整大小的项目，这些项目是在用户单击菜单中的项目时动态生成的。我不知道如何让 localstorage 工作以保存这些项目的坐标和大小。

如果加载页面时 HTML 中已经存在一个静态项，我可以让基本的本地存储工作，但这种方法似乎不适用于动态。

我应该在动态生成的每个项目的代码块中使用 localstorage.setitem 吗？这似乎过分了，但将其作为一个函数编写到目前为止失败了。

我在这里研究并尝试了许多现有的解决方案，但似乎没有任何适用于现代 jquery 代码的解决方案，因此非常感谢您提供任何帮助...谢谢。

HTML：

<body>
  <div id="outsidecontainer">
  <div id="menucontainer">
    <ul id="menu">
      <li class="ui-widget-header">
        <div>Products</div>
      </li>
      <li>
        <div id="rack">Rack</div>
      </li>
      <li>
        <div id="firewall">Firewall</div>
      </li>
      <li>
        <div>Option 3</div>
      </li>
    </ul>
    <button id="clear">Reset all</button>
  </div>
  <div id="containment-wrapper">
  </div>
  </div>
</body>

CSS：

#containment-wrapper {
  margin-left: 200px;
  height: 90vh;
  padding: 0.5em;
  background-repeat: no-repeat;
  background-clip: padding-box;
  background-position: 50% 25%;
  background-size:80%;
}

#outsidecontainer {
  border: 2px solid gray;  
}

#menucontainer {
  height: 100%;
  float: left;
  position: fixed;
  width: 200px;
  z-index: 1;
}

.remove_block{
  width: 100%;
  text-align: right;
  margin: 0 0 10px 0;
  cursor: default;
}

div.remove_block:after{
  display: inline-block;
  content: "\00d7"; /* This will render the 'X' */
}

jQuery:

$(function () {
  //DYNAMICALLY generate new copies of items
  var i = 1;
  $("#rack").click(function () {
    var dynamic_div =  $("<div />", {
      id: "product" + i
    })
      .css({
        id: "draggable",
        padding: "0.5em",
        //float: "left",
        margin: "0 10px 10px 0",
        cursor: "move",
        position: "absolute",
        background: "white"
        // border: "1px solid #ccc"
      })
      .addClass("draggable", "ui-widget-content");

    $(dynamic_div)
      .append(
        '<div id="block_container"><div class="remove_block"></div><img src="https://assets.codepen.io/759025/3500-1.svg" alt="Rack"></div>'
      )
      .css({
        width: 100
      });

    $(dynamic_div).append("<div>Rack</div>").css({
      "text-align": "center",
      "font-size": "24px",
      padding: " 0.25em",
      "line-height": "100%"
      //"white-space": "nowrap"
    });

    // APPEND THE NEWLY CREATED DIV TO "containment-wrapper".
    $(dynamic_div)
      .appendTo("#containment-wrapper")
      .draggable({
        containment: "#containment-wrapper",
        stack: ".draggable",
        scroll: false
      })
      .resizable({
        minHeight: 100,
        minWidth: 100,
        maxHeight: 500,
        maxWidth: 500,
        aspectRatio: false
      });
  i++;
});

  //DYNAMICALLY generate new copies of items
  var i = 1;
  $("#firewall").click(function () {
    var dynamic_div =  $("<div />", {
      id: "product" + i
    })
      .css({
        id: "draggable",
        padding: "0.5em",
        float: "left",
        margin: "0 10px 10px 0",
        cursor: "move",
        position: "absolute",
        background: "white",
        border: "1px solid #ccc"
      })
      .addClass("draggable", "ui-widget-content");

    $(dynamic_div)
      .append(
        '<div id="block_container"><div class="remove_block"></div><img src="https://assets.codepen.io/759025/firewall1.svg" alt="Firewall"></div>'
      )
      .css({
        width: 100
      });

    $(dynamic_div).append("Firewall").css({
      "text-align": "center",
      "font-size": "24px",
      padding: " 0.25em",
      "line-height": "100%"
    });

    // APPEND THE NEWLY CREATED DIV TO "containment-wrapper".
    $(dynamic_div)
      .appendTo("#containment-wrapper")
      .draggable({
        containment: "#containment-wrapper",
        stack: ".draggable",
        scroll: false
      })
      .resizable({
        minHeight: 100,
        minWidth: 100,
        maxHeight: 500,
        maxWidth: 500,
        aspectRatio: false
       });
  i++;
});

 //delete object when x is clicked 
 $(document).on('click', '.remove_block', function(events){
   $(this).parents('div').eq(1).remove();
});  
    
  
//END  
});

【问题讨论】：

标签： jquery local-storage dynamically-generated

【解决方案1】：

我认为目前有三个事件需要存储状态。

追加新项目后
删除项目时
当您停止拖动项目时。

其中两个基于点击事件，而可拖动 api 有一个您可以使用的 stop 事件。

每次都可以使用相同的功能。它将遍历所有元素并存储每种类型、位置和 z-index 以及您需要重现它的任何其他元数据。

需要先做几件事。

ID 不能在一个页面中重复，因此您需要改为更改为类。
我会添加一个data-type 属性，这样您就可以在 pge 加载正确的图像、文本等时使用该类型来重现元素

该函数将是一个容易失败的map() 操作来创建可以存储的对象数组

类似：

const dataArr = $('#containment-wrapper').children().map(function(){
   const $el = $(this);    
     const obj ={
        type: $el.data('type')// from data attribute,
        left: $el.css('left'),
        top: $el.css('top'),
        zIndex: $el.css('zIndex')

     }
     return obj;
}).get()

localStorage.setItem('elements', JSON.stringify(dataArr))

【讨论】：

是的 - 谢谢。我不知道如何开始使用该功能。
好的。我在这方面添加了更多内容
您所有的新商品都有相同的 id。这是不允许的
你可能不需要 id。
菜单 ID 没问题。他们没有被重复