javascript - SortableJS 没有将我排序的待办事项列表保存在 localStorage 中

Question

我有一个带有 localStorage 和 SortableJS 的待办事项项目。我遇到问题，当我对待办事项列表进行排序时，它不会更新本地存储。有人可以帮我找出保存排序列表的方法吗？代码如下，但最好访问代码片段下的 codepen 链接。

const clear = document.querySelector(".clear");
const dateElement = document.getElementById("date");
const list = document.getElementById("list");
const input = document.getElementById("input");

// Class names
const CHECK = "fa-check-circle";
const UNCHECK = "fa-circle-thin";
const LINE_THROUGH = "lineThrough";

// Variables
let LIST, id;

// Get item from localStorage
let data = localStorage.getItem("TODO");

// Check if data is not empty
if (data) {
  LIST = JSON.parse(data);
  id = LIST.length;
  loadList(LIST);
} else {
  LIST = [];
  id = 0;
}

// Load items to the user's interface
function loadList(array) {
  array.forEach(function(item) {
    addToDo(item.name, item.id, item.done, item.trash);
  });
}

// Clear the localStorage
clear.addEventListener("click", function() {
  localStorage.clear();
  location.reload();
})

// Show today's date
const options = {
  weekday: "long",
  month: "short",
  day: "numeric"
};
const today = new Date();

dateElement.innerHTML = today.toLocaleDateString("en-US", options);

// Add to do function
function addToDo(toDo, id, done, trash) {

  if (trash) {
    return;
  }

  const DONE = done ? CHECK : UNCHECK;
  const LINE = done ? LINE_THROUGH : "";

  const item = `<li class="item">
                  <i class="fa ${DONE}" job="complete" id="${id}"></i>
                  <p class="text ${LINE}">${toDo}</p>
                  <i class="fa fa-trash-o de" job="delete" id="${id}"></i>
                </li>
                `;
  const position = "beforeend";

  list.insertAdjacentHTML(position, item);
}

// Add an item to the list when the user cick the enter key
document.addEventListener("keyup", function(event) {
  if (event.keyCode == 13) {
    const toDo = input.value;

    // If the input isn't empty
    if (toDo) {
      addToDo(toDo);

      LIST.push({
        name: toDo,
        id: id,
        done: false,
        trash: false
      });
      // Add item to localStorage
      localStorage.setItem("TODO", JSON.stringify(LIST));

      id++;
    }
    input.value = ""
  }
});


// complete to do
function completeToDo(element) {
  element.classList.toggle(CHECK);
  element.classList.toggle(UNCHECK);
  element.parentNode.querySelector(".text").classList.toggle(LINE_THROUGH);

  LIST[element.id].done = LIST[element.id].done ? false : true;
}

// Remove to do
function removeToDo(element) {
  element.parentNode.parentNode.removeChild(element.parentNode);

  LIST[element.id].trash = true;
  // Add item to localStorage
  localStorage.setItem("TODO", JSON.stringify(LIST));
}

// Target the items created dynamically
list.addEventListener("click", function(event) {
  const element = event.target;
  const elementJob = element.attributes.job.value;

  if (elementJob == "complete") {
    completeToDo(element);
  } else if (elementJob == "delete") {
    removeToDo(element);
  }
  // Add item to localStorage
  localStorage.setItem("TODO", JSON.stringify(LIST));
});


// For sorting the list
Sortable.create(list, {
  animation: 100,
  group: 'list-1',
  draggable: '#list li',
  handle: '#list li',
  sort: true,
  filter: '.sortable-disabled',
  chosenClass: 'active'
});

/* ------------ youtube.com/CodeExplained ------------ */

body {
  padding: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.1);
  font-family: 'Titillium Web', sans-serif;
}


/* ------------ container ------------ */

.container {
  padding: 10px;
  width: 380px;
  margin: 0 auto;
}


/* ------------ header ------------ */

.header {
  width: 380px;
  height: 200px;
  background-image: url('');
  background-size: 100% 200%;
  background-repeat: no-repeat;
  border-radius: 15px 15px 0 0;
  position: relative;
}

.clear {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
}

.clear i {
  font-size: 30px;
  color: #FFF;
}

.clear i:hover {
  cursor: pointer;
  text-shadow: 1px 3px 5px #000;
  transform: rotate(45deg);
}

#date {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #FFF;
  font-size: 25px;
  font-family: 'Titillium Web', sans-serif;
}


/* ------------ content ------------ */

.content {
  width: 380px;
  height: 350px;
  max-height: 350px;
  background-color: #FFF;
  overflow: auto;
}

.content::-webkit-scrollbar {
  display: none;
}

.content ul {
  padding: 0;
  margin: 0;
}

.item {
  width: 380px;
  height: 45px;
  min-height: 45px;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.item i.co {
  position: absolute;
  font-size: 25px;
  padding-left: 5px;
  left: 15px;
  top: 10px;
}

.item i.co:hover {
  cursor: pointer;
}

.fa-check-circle {
  color: #6eb200;
}

.item p.text {
  position: absolute;
  padding: 0;
  margin: 0;
  font-size: 20px;
  left: 50px;
  top: 5px;
  background-color: #FFF;
  max-width: 285px;
}

.lineThrough {
  text-decoration: line-through;
  color: #ccc;
}

.item i.de {
  position: absolute;
  font-size: 25px;
  right: 15px;
  top: 10px;
}

.item i.de:hover {
  color: #af0000;
  cursor: pointer;
}


/* ------------ add item ------------ */

.add-to-do {
  position: relative;
  width: 360px;
  height: 40px;
  background-color: #FFF;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.add-to-do i {
  position: absolute;
  font-size: 40px;
  color: #4162f6;
}

.add-to-do input {
  position: absolute;
  left: 50px;
  height: 35px;
  width: 310px;
  background-color: transparent;
  border: none;
  font-size: 20px;
  padding-left: 10px;
}

.add-to-do input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #4162f6;
  font-family: 'Titillium Web', sans-serif;
  font-size: 20px;
}

.add-to-do input::-moz-placeholder {
  /* Firefox 19+ */
  color: #4162f6;
  font-family: 'Titillium Web', sans-serif;
  font-size: 20px;
}

.add-to-do input:-ms-input-placeholder {
  /* IE 10+ */
  color: #4162f6;
  font-family: 'Titillium Web', sans-serif;
  font-size: 20px;
}

.add-to-do input:-moz-placeholder {
  /* Firefox 18- */
  color: #4162f6;
  font-family: 'Titillium Web', sans-serif;
  font-size: 20px;
}

<script src="https://kit.fontawesome.com/ed2e310181.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/RubaXa/Sortable/Sortable.min.js"></script>
<div class="container">
  <div class="header">
    <div class="clear">
      <i class="fa fa-refresh"></i>
    </div>
    <div id="date"></div>
  </div>
  <div class="content">
    <ul id="list">
      <!-- <li class="item">
                  
                  <i class="fa fa-circle-thin co" job="complete" id="0"></i>
                  <p class="text"></p>
                  <i class="fa fa-trash-o" job="delete" id="1"></i>
                  
                </li> -->
    </ul>
  </div>
  <div class="add-to-do">
    <i class="fa fa-plus-circle"></i>
    <input type="text" id="input" placeholder="Add a to-do">
  </div>
</div>

请访问我的代码笔以获取工作项目。尝试添加 2 个或更多待办事项然后排序，刷新时希望保留排序列表。

https://codepen.io/Foxseiz/pen/ZEGadWZ

Answer 1

Sortable.create(list, {
        group: "TODO2",
        options: {
          animation: 100,
          draggable: "#list li",
          handle: "#list li",
          sort: true,
          filter: ".sortable-disabled",
          chosenClass: "active"
        },
        store: {
          /**
           * Get the order of elements. Called once during initialization.
           * @param   {Sortable}  sortable
           * @returns {Array}
           */
          get: function(sortable) {
            var order = localStorage.getItem(sortable.options.group.name);
            return order ? order.split("|") : [];
          },

          /**
           * Save the order of elements. Called onEnd (when the item is dropped).
           * @param {Sortable}  sortable
           */
          set: function(sortable) {
            var order = sortable.toArray();
            localStorage.setItem(sortable.options.group.name, order.join("|"));
          }
        }
      });

这适合你的情况