Question

我正在使用jQueryUI Sortable函数作为无序列表。我想将排序的订单保存到localstorage中。做这个的最好方式是什么？我在想ajax，但我不确定该怎么做。

到目前为止，这是我的源代码。

<ul id="wrapper">
    <li class="grid_section" id="grid1">
        <div class="grabber">
            <h2>Grid 1</h2>
        </div><!--/grabber-->
    </li>

    <li class="grid_section" id="grid2">
        <div class="grabber">
            <h2>Grid 2</h2>
        </div>
    </li>

    <li class="grid_section" id="grid3">
        <div class="grabber">
            <h2>Grid 3</h2>
        </div>                                               
    </li>
</ul>

这是我的javascript：

$(document).ready(function() {
    $(function() {
        $("#wrapper").sortable({
            update: function () {
                var order = $("#wrapper").sortable('toArray').toString();
                 console.log("Sorted : " + order);
                 $("#output").text(order);

                 $.ajax({                         
                     type: "POST",
                     data: "order=" + order,
                     dataType: "json",
                     success: function (order) {
                         console.log("Success" + order);
                     },
                     error: function (order) {
                         console.log("Failed" + order);
                     }
                 })
             },
             placeholder: "ui-state-highlight"
         }).disableSelection();
      });
  });

我可以很容易地看到订单并将其输出但现在我需要将该订单存储在localStorage中并在页面加载时调用它。我不确定localStorage是否是最佳解决方案。

Answer 1

如果您只想将它存储在localStorage中，那么就不需要AJAX，您可以直接在更新函数中直接写入值。

localStorage.setItem("sortOrder", order)

加载页面时，您需要从localStorage中检索值以初始化列表。

var order = localStorage.getItem("sortOrder")

HTML5 Web Strorage

如何将jQueryUI可排序列表的排序顺序保存到localStorage

1 个答案: