Блог

Главная - Вопросы по программированию - Локальное хранилище для хранения в порядке возрастания/убывания

Локальное хранилище для хранения в порядке возрастания/убывания

#javascript #local-storage

Вопрос:

У меня в коде есть кнопка «сортировать», которая сортирует цены на курсы в соответствии с самыми высокими и низкими и наоборот. Кнопка работает отлично, сейчас я пытаюсь создать локальное хранилище, чтобы сохранить порядок (по убыванию или возрастанию), чтобы порядок оставался прежним, даже если страница обновляется. Вот мой код локального хранилища:

   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

Проблема в том, что порядок (по убыванию/возрастанию) остается неизменным только для одного обновления, а затем возвращается к исходному после второго обновления. Я создал кодовую строку: https://codepen.io/ShawnTan15/pen/vYxebyO

Комментарии:

1. вместо установки всех отсортированных курсов в локальном хранилище, почему бы вам не установить флаг «направление» в локальном хранилище, который обновляется/устанавливается при нажатии кнопки «сортировать», а затем, когда приложение загружается, вы просто считываете флаг направления из локального хранилища и сортируете на лету?

Ответ №1:

Я просмотрел ваш код JS, и вы допустили только одну незначительную ошибку, в функции onload вам также нужно изменить courses переменную, поэтому, когда произойдет следующая (2-я) выгрузка, она будет принимать правильные отсортированные курсы (потому что вы устанавливаете список локальных курсов в localstorage) вместо глобального 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 amp;amp; 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);
  }
};

Комментарии:

1. Блестяще! Это хорошо работает. Однако есть одна небольшая проблема: когда список находится в порядке возрастания, а страница обновляется, мне приходится дважды нажимать кнопку сортировки, чтобы выполнить сортировку в порядке убывания. Я думаю, что это из-за функции btn eventlistener, где первый щелчок всегда сортирует список в порядке возрастания. Есть какой-нибудь способ решить эту проблему? В любом случае, большое вам спасибо.

2. Проблема все еще сохраняется после редактирования. Должен ли я просто пойти с вашим другим решением, которое начинается с порядка возрастания вместо первоначального порядка? Очень сожалею, что продолжаю вас беспокоить

3. Обновили код JS, дайте мне знать, работает это или нет

Ответ №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();

Ссылка на codepen

Метки: