Saving inline styles of a div to cookie doesn't work

Question

I have a problem with this html page. The position of the box should be saved in the cookie, but only the top: attribute is saved instead of top and left. is saved instead of

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>

I am trying to put in the cookie "a" the value of the attribute "style" when box drag ends.

I would prefer a non-jquery answer.

Thanks.

Going a bit off topic from the question, you should consider using localStorage instead of cookies. The key difference is that cookies are sent with every HTTP request, while localStorage is not. — Nisarg Shah, Apr 14 '18 at 13:28

blex · Accepted Answer · 2018-04-14T13:46:28.110

Note: I agree with Nisarg's answer, using localStorage is a lot easier than cookies, so you should consider using that instead.

Semi colons are not allowed in cookie names or values. They have a meaning, and are used to separate parameters.

You need to replace them with something else, like this for example:

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 "";
}

thank you. I actually prefer using cookies for the whole domain so i can read them with backend. — Matt Mas, Apr 14 '18 at 14:15

score 1 · Answer 2 · answered Apr 14 '18 at 13:42

The answer from Blex already points out the problem with the semicolons going into the cookie value, so I won't repeat that.

The other alternative is to use localStorage instead of cookie. It doesn't come with the limitation against semicolons, and a major benefit of using localStorage in this instance would be that it won't be sent to the server with every HTTP request.

Here's how your code looks if you simply changed the storage from cookie to localStorage:

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

Of course, you'd want to change the function name from setCookie and getCookie to something generic like persistConfiguration and loadConfiguation.

You can see working example here: https://codepen.io/Nisargshah02/pen/Ovebqz?editors=0010

You can read more about differences between localStorage and cookies here: Local Storage vs Cookies

Here's MDN's documentations about localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Saving inline styles of a div to cookie doesn't work

2 Answers2