Javascript 按升序/降序存储的本地存储

我的代码中有一个“排序”按钮，它根据从高到低对课程价格进行排序，反之亦然。这个按钮工作得非常好，我现在尝试使用本地存储来保存顺序（降序或升序），这样即使页面刷新，顺序也保持不变。这是我的本地存储代码：

  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

---

问题在于，顺序（降序/升序）仅在一次刷新时保持不变，然后在第二次刷新后返回原始顺序。我已经创建了一个代码笔：

我已经检查了您的JS代码，您只犯了一个小错误，在onload函数中，您还必须修改

courses

变量，因此在下一次（第二次）卸载时，它将采用正确的排序课程（因为您正在将本地课程列表设置为localstorage）而不是全局

课程

列表

// 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);
  }
};

---

我已经阅读了您的JS代码，您只犯了一个小错误，在onload函数中，您还必须修改

courses

变量，因此在下一次（第二次）卸载时，它将采用正确的排序课程（因为您正在将本地课程列表设置为localstorage）而不是全局

课程

列表

// 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);
  }
};

---

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

let课程=[
{
名称：“完成课程”，
价格：“2.3”
},
{
名称：“完成角航线”，
价格：“2.1”
},
{
名称：“完成Mern课程”，
价格：“2.9”
},
{
名称：“完整C++教程”，
价格：“2.4”
}
];
函数生成列表（）{
const ul=document.querySelector（“列表组”）；
ul.innerHTML=“”；
课程。forEach（（课程）=>{
const li=document.createElement（“li”）；
li.classList.add（“列表组项”）；
const name=document.createTextNode（course.name）；
li.儿童（姓名）；
const span=document.createElement（“span”）；
span.classList.add（“右浮动”）；
const price=document.createTextNode（“$”+course.price）；
span.附加子项（价格）；
李.儿童（span）；
ul.儿童（li）；
});
}
const btn=document.querySelector（“.btn success”）；
让desc=localStorage.getItem（“顺序”）=“降序”；
函数sortCourses（）{
courses.sort（（a，b）=>desc？b.price-a.price:a.price-b.price）；
}
sortCourses（）；
btn.onclick=（）=>{
desc=！desc；
sortCourses（）；
生成论者（）；
}
////////本地存储////////
///////////////////////////////
window.addEventListener（“卸载前”，（e）=>{
setItem（“订单”，desc？“降序”：“升序”）；
});
window.onload=（）=>generateList（）；

---

链接到

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

let课程=[
{
名称：“完成课程”，
价格：“2.3”
},
{
名称：“完成角航线”，
价格：“2.1”
},
{
名称：“完成Mern课程”，
价格：“2.9”
},
{
名称：“完整C++教程”，
价格：“2.4”
}
];
函数生成列表（）{
const ul=document.querySelector（“列表组”）；
ul.innerHTML=“”；
课程。forEach（（课程）=>{
const li=document.createElement（“li”）；
li.classList.add（“列表组项”）；
const name=document.createTextNode（course.name）；
li.儿童（姓名）；
const span=document.createElement（“span”）；
span.classList.add（“右浮动”）；
const price=document.createTextNode（“$”+course.price）；
span.附加子项（价格）；
李.儿童（span）；
ul.儿童（li）；
});
}
const btn=document.querySelector（“.btn success”）；
让desc=localStorage.getItem（“顺序”）=“降序”；
函数sortCourses（）{
courses.sort（（a，b）=>desc？b.price-a.price:a.price-b.price）；
}
sortCourses（）；
btn.onclick=（）=>{
desc=！desc；
sortCourses（）；
生成论者（）；
}
////////本地存储////////
///////////////////////////////
window.addEventListener（“卸载前”，（e）=>{
setItem（“订单”，desc？“降序”：“升序”）；
});
window.onload=（）=>generateList（）；

---

链接到

与其在本地存储中设置整个已排序的课程，不如在本地存储中设置一个“方向”标志，每当单击“排序”按钮时，该标志就会被更新/设置，然后当应用程序加载时，您只需从本地存储中读取方向标志并动态排序？而不是在本地存储中设置整个已排序的课程，为什么不在localStorage中设置一个“方向”标志，每当单击“排序”按钮时，该标志就会被更新/设置，然后当应用程序加载时，您只需从localStorage读取方向标志并动态排序？太棒了！这很有效。然而，有一个小问题，当列表按升序排列并且页面刷新时，我必须按两次排序按钮才能按降序排列。我认为这是因为btn的eventlistener函数，第一次单击总是按升序排序列表。有办法解决这个问题吗？无论如何，非常感谢。编辑后问题仍然存在。我是否应该使用另一种解决方案，即从升序开始，而不是从原始顺序开始？非常抱歉，我一直打扰你更新了JS代码，让我知道这是否有效！这很有效。然而，有一个小问题，当列表按升序排列并且页面刷新时，我必须按两次排序按钮才能按降序排列。我认为这是因为btn的eventlistener函数，第一次单击总是按升序排序列表。有办法解决这个问题吗？无论如何，非常感谢。编辑后问题仍然存在。我是否应该使用另一种解决方案，即从升序开始，而不是从原始顺序开始？非常抱歉，我一直打扰你更新了JS代码，让我知道这是否有效