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

时间:2012-09-09 02:25:10

标签: javascript jquery cookies local-storage

我正在重写我的代码,允许用户在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

1 个答案:

答案 0 :(得分:1)

Localstorage比cookie好得多。因为每次请求都不会向服务器发送额外的字节,依此类推。 请记住,大多数cookie问题仍然存在转移到localStorage - 来自多个选项卡和相同域的脚本可能会弄乱您的存储数据,但我认为它是您自己的网站,没有第三方包含,您应该担心。