Javascript 在Cookie/localStorage中保存多个div位置

我正在使用WinMove函数使类为ibox title的div可移动，但我不知道如何让用户计算机将div位置保存在cookie/localStorage中，以便将div保存在用户放置它们的位置。每个页面上都有多个页面和多个div，因此为每个div提供一个函数是很枯燥的，但我也不知道如何使这样的东西变得动态，因为我对javascript/jquery几乎没有经验，对cookie/localStorage也没有经验

jsfiddle：

允许用户在页面上移动div的功能

function WinMove() {
    var element = "[class*=col]";
    var handle = ".ibox-title";
    var connect = "[class*=col]";
    $(element).sortable(
        {
            handle: handle,
            connectWith: connect,
            tolerance: 'pointer',
            forcePlaceholderSize: true,
            opacity: 0.8
        })
        .disableSelection();
}

<div class="row">
 <div class="col-lg-6">
  <div class="ibox">
   <div class="ibox-title">
    <h5>Element 1</h5>
   </div>
  <div class="ibox-content"></div>
 </div>
</div>

每个div将包含在任何给定页面上的内容样本

function WinMove() {
    var element = "[class*=col]";
    var handle = ".ibox-title";
    var connect = "[class*=col]";
    $(element).sortable(
        {
            handle: handle,
            connectWith: connect,
            tolerance: 'pointer',
            forcePlaceholderSize: true,
            opacity: 0.8
        })
        .disableSelection();
}

<div class="row">
 <div class="col-lg-6">
  <div class="ibox">
   <div class="ibox-title">
    <h5>Element 1</h5>
   </div>
  <div class="ibox-content"></div>
 </div>
</div>

要素1

---

谢谢！：）

你必须以某种方式区分它们。我不知道你们不想要硬编码变量是什么意思，但你们必须有一些东西。例如，您可以给每个div一个属性

data-col\u id=“some\u unique\u value”

。之后，当您想要保存位置时，您将提取它们并保留在某个位置：

function() {
    var positions = {}
    $('[data-col_id]').each(function() {
        positions[$(this).data('col_id')] = $(this).offset()
    })
    localStorage.setItem('col_positions', JSON.stringify(positions))
}

当需要恢复数据时，请执行相反的操作—获取保存的数据并使用它：

function() {
    var positions = localStorage.getItem('col_positions')
    positions = positions ? JSON.parse(positions) : {}
    for (var col_id in positions)
        $('[data-col_id="' + col_id + '"]').offset(positions[col_id])
}

当然，您的定位可能与使用jquery

offset

方法不同，这只是一个示例。此外，建议的命名（

data-col\u id

）也只是一个示例，可以轻松更改

---

---

如果您的html结构是常量，并且您确信它将是常量，那么您可以避免给元素指定任何唯一的名称，而只需使用页面标识符（例如

location.href

）和xpath的组合。你可以找到如何和如何。然而，我确实反对这样做，因为xpath非常不可靠，只需稍微修改DOM即可更改。

我意识到您需要的是可排序元素的还原顺序，而不是它们在页面上的位置。为此，您可以使用

sortable

插件的

update

事件，在该插件的处理程序中，您可以将当前位置保存到本地存储：

$(element).sortable({
  update: function(e, ui) {
    var parent = ui.item.closest('[data-par_id]');
    var positions = []
    $('[data-col_id]').each(function() {
      positions.push({
        col_id : $(this).data('col_id'),
        par_id : $(this).closest('[data-par_id]').data('par_id')
      })
    })
    localStorage.setItem('all_orders', JSON.stringify(positions))
    console.log(JSON.stringify(positions))
  }
})

现在，请在下次打开页面时恢复顺序，我只需获取保存的数组，然后按照该顺序提取相应的元素并将其追加到列表中：

(function() {
  // get saved positions
  var positions = localStorage.getItem('all_orders')
  console.log(positions)
  positions = positions ? JSON.parse(positions) : []
  // sort the list
  for (var i in positions) {
    var element = positions[i]
    $('[data-par_id="' + element.par_id + '"]').append(
      $('[data-col_id="' + element.col_id + '"]').detach()
    )
  }
}) ()

这种方法要求每一行有一个唯一的标识符（在上面的代码中是

data-col\u id

），每个容器也有一个唯一的标识符（我选择了

data-par\u id

）

另外，您必须调用

.sortable

而不是要移动的元素，而是它们的父元素

---

这是一把工作小提琴，我在其中重写了你的

WinMove

函数。

你是说“localStorage”？为什么你更喜欢饼干呢？啊，是的，我是说本地存储，我会解决的。据我所知，cookie在较旧的浏览器上工作得更好，这可能是向后的，但这就是原因。即使你必须支持（真的吗？），也最好使用一个垫片，而不是降级整个工作流，只要它保存在用户机上，不管是cookie还是localstorage，然后它非常感谢您的回答，我不想硬编码的意思是，我看到了类似的答案，其中有一段代码专门用于每个div，将该div的顶部和左侧位置移动到它自己的cookie变量中。所以，如果我有50多个div，我有50多个代码示例，它们都是相同的，但是每个div都是特定的，我真的不明白你的意思：我的答案中的代码不需要多次使用。只有

data-colu\u id

特性应该分配给每个div，或者任何其他区分div的方法（如何区分），例如

id

属性，或者xpath idea，它根本不需要修改html（答案的最后一部分）。哦，不，我不是说关于你的答案，我刚才回答了一些你在我的问题中不确定的问题。那么对于函数，我是否将它们设置为自动关闭函数？我不知道自动关闭函数是什么，但这几乎肯定不重要。我编写

function（）{…}

只是为了对代码进行分组。