保存在Cookie

Question

所以我有一个div，cguts，可以使用jquery切换可见性并且可以在屏幕上拖动。我已经设法弄清楚如何使用cookie来提高持续性的可见性，但我似乎无法掌握如何让div的位置在整个站点中保持不变。

除了将div的位置从一个页面保存到下一个页面之外，以下代码适用于所有内容。

$(document).ready(function () {   
        var cookieName = 'cvis';

        function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + 31536000000); //1 year 
            document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }
        if (getCookie(cookieName) === '1') {
            $('#cguts').show();
            $('#cguts').draggable(function(event, ui) {
             var currentPos = $(this).position();
             var currentTop = Math.round(currentPos.top);

             // save cookie when stopped dragging
             $.cookie('position' + $(this).index('div').toString(), currentTop.toString());});
        } else if (getCookie(cookieName) === '0') {
            $('#cguts').hide();
        } else {
            setCookie(cookieName, '1');
            $('#cguts').show();
            $('#cguts').draggable(function(event, ui) {
             var currentPos = $(this).position();
             var currentTop = Math.round(currentPos.top);

             // save cookie when stopped dragging
             $.cookie('position' + $(this).index('div').toString(), currentTop.toString());});
        }
        $('.click').on('click', function () {
            if ($('#cguts').is(':visible')) {
                $('#cguts').fadeOut(300);
                setCookie(cookieName, '0');
            } else {
                $('#cguts').fadeIn(300);
                $('#cguts').draggable(function(event, ui) {
             var currentPos = $(this).position();
             var currentTop = Math.round(currentPos.top);

             // save cookie when stopped dragging
             $.cookie('position' + $(this).index('div').toString(), currentTop.toString());});
                setCookie(cookieName, '1');
            }
        });
    });

我现在的问题是我做错了什么？我怀疑这个问题是在可编码的cookie编码中，但我正式丢失了......

Answer 1

我认为这就是你需要的

小提琴链接https://jsfiddle.net/k414mtmt/2/

    $('#cguts').draggable({

    drag: function(event, ui) {

    var currentPos = $(this).position();
    var currentTop = Math.round(currentPos.top);

    // save cookie when stopped dragging
    setCookie('position' + $(this).index('div').toString(), currentTop.toString());
  }
});

 希望这有帮助.. :)

Answer 2

我最终从另一个方向接近了这个问题，所以我想我会分享最终成为我的解决方案。

我将以下内容添加到文件的开头：

$(document).ready(function () {
     if ($.cookie("cvispos") != undefined) {
         var unwrapped = window.JSON.parse($.cookie("cvispos"));
         var left = window.JSON.parse($.cookie("cvispos")).left;
         var top = window.JSON.parse($.cookie("cvispos")).top;
         $("#cguts").css("left", left + "px");
         $("#cguts").css("top", top + "px");
     }
 });

然后将我的可拖动值更改为：

$( "#cguts" ).draggable({ stop: function (event, ui) {
         $.cookie("cvispos", window.JSON.stringify(ui.position));
     }
     });

它就像一个魅力。