将可拖动 div 的位置保存到本地存储？

Question

我正在重写我的代码，允许用户在 iOS 上拖动 div 以使其更清晰，我希望实现的更改之一是使用 localstorage 来保存和检索其中每个的位置div的。

jQuery:

$(".drag").each(function () {
    var drag = this;
    xPos = drag.offsetWidth / 2;
    yPos = drag.offsetHeight / 2;
    drag.addEventListener("touchmove", function() {
        event.preventDefault();
        $(this).css({
            "left" : event.targetTouches[0].pageX - xPos + "px", 
            "top" : event.targetTouches[0].pageY - yPos + "px",
            "z-index" : "101",
        });
        $("div").not(this).css("z-index", "100");
    });
});

之前，我使用 cookie 设置位置：

$(window).unload(function () {
    $(".remember").each(function () {
        $.cookie(this.id, this.value, {
            expires: 365
        });
    });
    $(".draggable").each(function () {
        var a = $(this);
        $.cookie(this.id, a.css("top") + "_" + a.css("left"), {
            expires: 365
        });
        $.cookie("disp" + this.id, a.css("display"), {
            expires: 365
        });
    });
});

每个可拖动的 div 上面都有一个 .draggable 类，如果我想保存文本框的值，它上面有一个 .remember 类。

是否值得/实用更新它以使用LocalStorage？

Answer 1

Localstorage 比 cookie 更好。因为您不会在每个请求等时向服务器发送额外的字节。 请记住，cookie 的大多数问题仍然存在于向 localStorage 的过渡 - 来自多个选项卡和同一个域的脚本可能会弄乱您存储的数据，但我假设它是您自己的站点，没有第三方包含，您应该担心。