用于存储 ascending/descending 订单的本地存储

Question

我的代码中有这个 'sort' 按钮，可以根据最高到最低对课程价格进行排序，反之亦然。该按钮工作得很好，我现在正在尝试进行本地存储以保留顺序（降序或升序），以便即使页面刷新，顺序也保持不变。这是我的本地存储代码：

  window.addEventListener('beforeunload', () => {
    localStorage.setItem('order', JSON.stringify(courses));
    });
  
var orderList = localStorage.getItem('order');
  
   function getCourseOrder() {
      if (orderList) {
        return JSON.parse(orderList);
      } else {
        return [];
      }
    }

 window.onload = function() {
 generateList(getCourseOrder())
}
//generateList is to create elements and append etc

问题是顺序 (descending/ascending) 仅在一次刷新时保持不变，然后在第二次刷新后 returns 变为原始顺序。我创建了一个代码笔：https://codepen.io/ShawnTan15/pen/vYxebyO

Answer 1

我看过你的JS代码，你只犯了一个小错误，在onload函数中你还必须修改courses变量，所以当下一次（第二次）卸载发生时，它会选择正确的排序课程（因为您将本地课程列表设置为本地存储）而不是全局 courses 列表。

// Made it let
let courses = [
  {
    name: "Complete ReactJS course",
    price: "2.3",
  },
  {
    name: "Complete Angular course",
    price: "2.1",
  },
  {
    name: "Complete Mern course",
    price: "2.9",
  },
  {
    name: "Complete C++ course",
    price: "2.4",
  },
];

function generateList(courseList) {
  const ul = document.querySelector(".list-group");
  ul.innerHTML = "";
  courseList.forEach((course) => {
    const li = document.createElement("li");
    li.classList.add("list-group-item");
    const name = document.createTextNode(course.name);
    li.appendChild(name);
    const span = document.createElement("span");
    span.classList.add("float-right");
    const price = document.createTextNode("$ " + course.price);
    span.appendChild(price);
    li.appendChild(span);
    ul.appendChild(li);
  });
}

generateList(courses);

const btn = document.querySelector(".btn-success");
let activeSortingType;
let isSortingDirty = false;
btn.addEventListener("click", function () {
  isSortingDirty = true;
  if (activeSortingType === "asc") {
    activeSortingType = "desc";
    courses.sort((a, b) => b.price - a.price);
  } else if (activeSortingType === "desc") {
    activeSortingType = "asc";
    courses.sort((a, b) => a.price - b.price);
  } else if (activeSortingType === null) {
    activeSortingType = "asc";
    courses.sort((a, b) => a.price - b.price);
  }
  generateList(courses);
});

////////Local Storage////////
/////////////////////////////

window.addEventListener("beforeunload", (e) => {
  localStorage.setItem("order", JSON.stringify(courses));
  if (activeSortingType !== null && isSortingDirty) {
    const currentSortingType = localStorage.setItem(
      "activeSortingType",
      activeSortingType
    );
  }
});

const orderList = localStorage.getItem("order");

function getCourseOrder() {
  if (orderList) {
    // Updating the courses list here in onload
    courses = JSON.parse(orderList);
    return courses;
  } else {
    return [];
  }
}

window.onload = function () {
  const courseList = getCourseOrder();
  activeSortingType = localStorage.getItem("activeSortingType");
  if (courseList.length) {
    generateList(courseList);
  }
};

Answer 2

我建议您不要将所有课程都保存到本地存储中，而是只保存订单：

let courses = [
  {
    name: "Complete ReactJS course",
    price: "2.3"
  },
  {
    name: "Complete Angular course",
    price: "2.1"
  },
  {
    name: "Complete Mern course",
    price: "2.9"
  },
  {
    name: "Complete C++ course",
    price: "2.4"
  }
];

function generateList() {
  const ul = document.querySelector(".list-group");
  ul.innerHTML = "";

  courses.forEach((course) => {
    const li = document.createElement("li");
    li.classList.add("list-group-item");
    const name = document.createTextNode(course.name);
    li.appendChild(name);
    const span = document.createElement("span");
    span.classList.add("float-right");
    const price = document.createTextNode("$ " + course.price);
    span.appendChild(price);
    li.appendChild(span);
    ul.appendChild(li);
  });
}

const btn = document.querySelector(".btn-success");

let desc = localStorage.getItem("order") == "descending";

function sortCourses() {
  courses.sort((a, b) => desc ? b.price - a.price : a.price - b.price);
}

sortCourses();

btn.onclick = () => {
  desc = !desc;

  sortCourses();

  generateList();
}

//////// Local Storage ////////
///////////////////////////////

window.addEventListener("beforeunload", (e) => {
  localStorage.setItem("order", desc ? "descending" : "ascending");
});

window.onload = () => generateList();

Link 到 codepen

用于存储 ascending/descending 订单的本地存储

Local Storage to store ascending/descending order

javascript

local-storage