如何从〔object HTMLUListElement〕将UL从cookie获取到Array

我终于让cookie正常工作了。

问题是cookie中的数据是[object htmlulistelement]作为字符串，而不是列表数据本身。

现在ulCookie中的数据是正确的，并且使用getCookie（cname）函数，如http://www.w3schools.com/js/js_cookies.asp数据检索正确。

同样重要的是，如果存在cookie，则在加载cookie后添加Eventlisteners。。

http://www.w3schools.com/js/js_cookies.asp是一个有用的链接

请参阅我的最终构建的这个片段。（我不得不将js文件（cookies.js和main.js，我不知道如何在代码片段中实现，所以它可能在这里不起作用。我在js中评论了哪个文件开始。）

最终工作读取cookie代码（cname是cookie的名称）：

function readCookie(document) {
  console.log(cname);
  function getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.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 "";
  }
  console.log(getCookie(cname));
};

整个代码如下：

// code by Friso NL - frisog at gmail .com
// events to create according ot: http://www.html5rocks.com/en/tutorials/dnd/basics/
//
// dragstart
// drag
// dragenter
// dragleave
// dragover
// drop
// dragend
// main.js //
window.onload = function() {
  window.parentOfItemslist = document.getElementById('checklist');
  // console.log(listItems);
  window.addEventListeners = function(listItems) {
    for (i = 0; i < listItems.length; i++) {
      window.listItem = listItems[i];
      listItem.setAttribute("order-id", i);
      listItem.addEventListener('dragstart', handleDragStart, false)
      listItem.addEventListener('dragenter', handleDragEnter, false)
      listItem.addEventListener('dragover', handleDragOver, false)
      listItem.addEventListener('dragleave', handleDragLeave, false)
      listItem.addEventListener('drop', handleDrop, false)
      listItem.addEventListener('dragend', handleDragEnd, false)
    }
  };

  window.listItems; // window.variable makes it global! instead of var = ...;
  window.createListInitial = function(e) {
    var listItmesWithoutExtra = document.querySelectorAll('.listItem');
    console.log(listItmesWithoutExtra);
    var extraLi = document.createElement("LI");
    extraLi.classList.add("ghostLi", "listItem");
    console.log(extraLi);
    var arrayListItmesWithoutExtra = Array.prototype.slice.call(listItmesWithoutExtra, 0);
    arrayListItmesWithoutExtra.push(extraLi);
    listItems = arrayListItmesWithoutExtra;
    console.log(listItems);
    window.parentOfItemslist = document.getElementById('checklist');
    console.log(parentOfItemslist);
    parentOfItemslist.innerHTML = "";
    for (i = 0; i < listItems.length; i++) {
      parentOfItemslist.appendChild(listItems[i]);
    }
    console.log(listItems);
    addEventListeners(listItems);
  };

  window.checkCurrentListItems = function(e) {
    var listItems = document.querySelectorAll('.listItem');
    return listItems;
  }
  var dragSrcEl = null;
  function handleDragStart(e) {
    this.className += " dragStartClass";
    dragSrcEl = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
    // e.dataTransfer.setDragClass("dataTransferClass");
  }
  function handleDragOver(e) {
    // if (e.preventDefault) { not needed according to my question and anwers on : http://stackoverflow.com/questions/36920665/why-if-statement-with-e-preventdefault-drag-and-drop-javascript
    e.preventDefault();
    // }
    e.dataTransfer.dropEffect = 'move'; // sets cursor
    return false;
  }
  function handleDragEnter(e) {
    // this / e.target is the current hover target.
    this.classList.add('over');
  }
  function handleDragLeave(e) {
    this.classList.remove('over'); // this / e.target is previous target element.
  }
  window.handleDrop = function(e) {
    checkCurrentListItems();
    e.stopPropagation(); // stops the browser from redirecting.
    dragSrcOrderId = parseInt(dragSrcEl.getAttribute("order-id"));
    dragTargetOrderId = parseInt(this.getAttribute("order-id"));
    var tempThis = this;
    // Don't do anything if dropping the same column we're dragging.
    // and
    // check if only one difference and then do not execute
    // && ((Math.abs(dragSrcOrderId - dragTargetOrderId)) != 1)
    if (dragSrcEl != this) {
      // Set the source column's HTML to the HTML of the column we dropped on.
      var tempThis = this;
      function makeNewOrderIds(tempThis) {
        // check if up or down movement
        dragSrcEl.setAttribute("order-id", dragTargetOrderId);
        tempThis.setAttribute("order-id", dragTargetOrderId);
        //  find divs between old and new location and set new ids - different in up or down movement (if else)
        if (dragSrcOrderId < dragTargetOrderId) {
          for (i = dragSrcOrderId + 1; i < dragTargetOrderId; i++) {
            listItems[i].setAttribute("order-id", i - 1);
            // set new id src
            dragSrcEl.setAttribute("order-id", dragTargetOrderId - 1);
          }
        } else {
          for (i = dragTargetOrderId; i < dragSrcOrderId; i++) {
            listItems[i].setAttribute("order-id", i + 1);
            // set new id src
            dragSrcEl.setAttribute("order-id", dragTargetOrderId);
          }
        }
      };
      makeNewOrderIds(tempThis);
      dragSrcEl.classList.remove("dragStartClass");
      this.classList.remove('over'); // this / e.target is previous target element.
      reOrder(listItems);

    } else {
      dragSrcEl.classList.remove("dragStartClass");
      return false;
    }
  };
  function handleDragEnd(e) {
    for (i = 0; i < listItems.length; i++) {
      listItem = listItems[i];
      listItem.classList.remove('over');
    }
    dragSrcEl.classList.remove("dragStartClass");
  }
  window.reOrder = function(listItems) {
    var tempListItems = listItems;
    tempListItems = Array.prototype.slice.call(tempListItems, 0);
    tempListItems.sort(function(a, b) {
      return a.getAttribute("order-id") - b.getAttribute("order-id");
    });
    window.parentOfItemslist = document.getElementById('checklist');
    parentOfItemslist.innerHTML = "";
    for (var i = 0, l = tempListItems.length; i < l; i++) {
      parentOfItemslist.appendChild(tempListItems[i]);
    }
    createCookie(document);
  };
  CheckIfCookie(document);
};
// cookies.js //
window.cname = "ulCookie";
window.exdays = 20;
function CheckIfCookie(document) {
  if (document.cookie) {
    console.log("cookie!");
    readCookieAndSetLu(document);
    // read cookie
  } else {
    createListInitial();
    console.log(listItems);
  };
};
function createCookie(document) {
  // call this after drop and update of listItems
  window.cvalue = parentOfItemslist.innerHTML;
  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;
  }
  setCookie(cname, cvalue, exdays);
};
function readCookieAndSetLu(document) {
  console.log(cname);
  function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.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 "";
  }
  console.log(getCookie(cname));
  parentOfItemslist.innerHTML = getCookie(cname);
  newUl = document.getElementById('checklist');
  console.log(newUl);
  listItems = checkCurrentListItems();
  addEventListeners(listItems);
};

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.ghostLi {
  width: 20px;
  height: 20px;
  background-color: white !important;
}
.listItem {
  padding: 10px 10px 10px 10px;
  margin: 3px;
  background-color: red;
  color: white;
  width: 30px;
  border-top: thick solid white;
  border-top-width: 1px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.dataTransferClass {
  background-color: brown;
}
.dragStartClass {
  opacity: 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.listItem.over {
  border-top: thick solid white;
  border-top-width: 50px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <ul id="checklist">
    <li class="listItem" draggable="true">1</li>
    <li class="listItem" draggable="true">2</li>
    <li class="listItem" draggable="true">3</li>
    <li class="listItem" draggable="true">4</li>
    <li class="listItem" draggable="true">5</li>
    <li class="listItem" draggable="true">6</li>
  </ul>
</body>
<script type="text/javascript" src="app/js/main.js"></script>
<script type="text/javascript" src="app/js/cookies.js"></script>
</html>

您可以尝试以下操作：我假设您的cookie数据HTMLUListElement在cookObj变量中。

你可以写：

var cookObj;
for (var dVal in cookObj){
    console.log(dVal[member]);
}

并且，在检查元素的帮助下检查打印了哪些文本。

函数getCookie（名称）
｛
var re=new RegExp（name+"=（[^；]+）"）
var值=re.exec（document.cookie）
return（value！=null）？unescape（value[1]）：null
}

要显示名为UlCookie的cookie的值：

document.write（getCookie（"UlCookie"））