Question

这个html页面有问题。框的位置应保存在cookie中，但只保存top：属性而不是顶部和左侧。（Demo here）保存而不是

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
//Make the DIV element draggagle:
document.getElementById("mydiv").setAttribute("style",getCookie("a"));
dragElement(document.getElementById(("mydiv")));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
 setCookie("a",document.getElementById("mydiv").style.cssText,1);
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#mydiv {
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
}

#mydivheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}

<!DOCTYPE html>
<html>
<body>

<div id="mydiv" >
  <div id="mydivheader">Title</div>
  <div contenteditable="true">
  <p>Move gfsdg gt gf gfg g fdgdfgfdg</p>
  </div>
</div>
</body>
</html>

我试图在框拖动结束时将“a”属性的值放入cookie“a”。

我更喜欢非jquery答案。

Answer 1

注意：我同意Nisarg的回答，使用localStorage比使用Cookie容易得多，所以你应该考虑使用它。

Cookie名称或值中不允许使用半冒号。它们有意义，用于分隔参数。

您需要将其替换为其他内容，例如：

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    // Replace semicolons before saving the cookie
    var escapedCvalue = cvalue.replace(/;/g, '{{semicolon}}');  // <-------
    document.cookie = cname + "=" + escapedCvalue + ";" + expires + ";path=/"; // <-------
}
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie .split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length)
                    // Put semicolons back in there
                    .replace(/\{\{semicolon\}\}/g, ';'); // <------
        }
    }
    return "";
}

Answer 2

Blex的答案已经指出了分号进入cookie值的问题，所以我不再重复了。

另一种方法是使用localStorage而不是cookie。它没有对分号的限制，在这种情况下使用localStorage的一个主要好处是它不会在每次HTTP请求时发送到服务器。

如果您只是将存储从cookie更改为localStorage，那么代码的外观如下：

function setCookie(cname, cvalue, exdays) {
    localStorage.setItem(cname, cvalue);
}
function getCookie(cname) {
    return localStorage.getItem(cname);
}

当然，您需要将函数名称从setCookie和getCookie更改为通用内容，例如persistConfiguration和loadConfiguation。

您可以在此处查看工作示例：https://codepen.io/Nisargshah02/pen/Ovebqz?editors=0010

您可以在此处详细了解localStorage和Cookie之间的差异：Local Storage vs Cookies

这是MDN关于localStorage的文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

将div的内联样式保存到cookie不起作用

2 个答案: