Javascript 对本地存储进行排序（阵列/字符串化）_Javascript_Html_Arrays_Sorting_Local Storage

Javascript 对本地存储进行排序（阵列/字符串化）

javascript html arrays sorting

Javascript 对本地存储进行排序（阵列/字符串化）,javascript,html,arrays,sorting,local-storage,Javascript,Html,Arrays,Sorting,Local Storage,我将用户输入（员工姓名、车辆Vin、开始时间和结束时间）存储到本地存储器后显示在表单下方。我想把员工的名字按字母顺序排列。我应该把代码放在哪里，以及如何编写代码 // Car Class: Represent a Car class Car{ constructor(worker, carVin, strTime, endTime){ this.worker = worker; this.carVin = carVin; this.strTim

我将用户输入（员工姓名、车辆Vin、开始时间和结束时间）存储到本地存储器后显示在表单下方。我想把员工的名字按字母顺序排列。我应该把代码放在哪里，以及如何编写代码

// Car Class: Represent a Car
class Car{
  constructor(worker, carVin, strTime, endTime){
        this.worker = worker;
        this.carVin = carVin;
        this.strTime = strTime; 
        this.endTime = endTime; 
    }
 }

//UI类：处理UI任务

 class UI {
    static displayCars(){
      const cars = Store.getCars();

      cars.forEach((car) => UI.addCarToList(car));
  }
    static addCarToList(car){
      const list = document.querySelector('#car-list');

      const row = document.createElement('tr');

      row.innerHTML = `
      <td>${car.worker}</td>
      <td>${car.carVin}</td>
      <td>${car.strTime}</td>
      <td>${car.endTime}</td>
      <td><a href="#" class="btn btn-danger btn-sm 
      delete">Clear</a></td>`;

      list.appendChild(row);
  }
  static deleteCar(el){
      if(el.classList.contains('delete')){
          el.parentElement.parentElement.remove();
      }
  }
  static showAlert(message, className){
      const div =document.createElement('div');
      div.className = `alert alert-${className}`;
      div.appendChild(document.createTextNode(message));
      const container = document.querySelector('.container');
      const form = document.querySelector('#car-form');
      container.insertBefore(div, form);

      // Vanish in 3 secs
      setTimeout(() => document.querySelector('.alert').remove(),3000);
  }

  static clearFields(){
      document.querySelector('#worker').value = '';
      document.querySelector('#carVin').value = '';
      document.querySelector('#strTime').value = '';
      document.querySelector('#endTime').value = '';
   }

}

//活动：展示汽车：

 document.addEventListener('DOMContentLoaded', UI.displayCars);
 //Event: Add a  Car:
 document.querySelector('#car-form').addEventListener('submit',(e) => {
// Prevent actual submit
 e.preventDefault();

// Get form Value
const worker = document.querySelector('#worker').value;
const carVin = document.querySelector('#carVin').value;
const strTime = document.querySelector('#strTime').value;
const endTime = document.querySelector('#endTime').value;

//Validate
if(worker === ''|| carVin === ''|| strTime === '' || endTime === ''){
    UI.showAlert('Please fill all fields', 'danger');   
} else {

    //Instatiate book
    const car = new Car(worker, carVin, strTime, endTime);

    // Add book to list 
    UI.addCarToList(car);

    // Add book to local storage
    Store.addCar(car);

    // Show Success msg
    UI.showAlert('Car Added', 'success');

    //Clear fields
    UI.clearFields();

}

}))

//事件：移除一辆汽车

…一些代码…

也许这会帮助您：

// Car Class: Represent a Car
class Car{
  constructor(worker, carVin, strTime, endTime){
        this.worker = worker;
        this.carVin = carVin;
        this.strTime = strTime; 
        this.endTime = endTime; 
    }
 }

class UI {
    static displayCars(){
      const cars = Store.getCars();
      const list = document.querySelector('#car-list'); ///
      list.innerHTML = ""; ///
      cars.forEach((car) => UI.addCarToList(car));
  }
    static addCarToList(car){
      const list = document.querySelector('#car-list');
      const row = document.createElement('tr');
      row.innerHTML = `
      <td>${car.worker}</td>
      <td>${car.carVin}</td>
      <td>${car.strTime}</td>
      <td>${car.endTime}</td>
      <td><a href="#" class="btn btn-danger btn-sm 
      delete">Clear</a></td>`;
      list.appendChild(row);
  }
  static deleteCar(el){
      if(el.classList.contains('delete')){
          el.parentElement.parentElement.remove();
      }
  }
  static showAlert(message, className){
      const div =document.createElement('div');
      div.className = `alert alert-${className}`;
      div.appendChild(document.createTextNode(message));
      const container = document.querySelector('.container');
      const form = document.querySelector('#car-form');
      container.insertBefore(div, form);

      // Vanish in 3 secs
      setTimeout(() => document.querySelector('.alert').remove(),3000);
  }

  static clearFields(){
      document.querySelector('#worker').value = '';
      document.querySelector('#carVin').value = '';
      document.querySelector('#strTime').value = '';
      document.querySelector('#endTime').value = '';
   }

}

class Store{
   static getCars(){
     let cars;
     if(localStorage.getItem('cars') === null){
         cars = [];
      } else {
         cars = JSON.parse(localStorage.getItem('cars'));
     }

      return cars;
    }
    static addCar(car){
       const cars = Store.getCars();
       cars.push(car);
       cars.sort((a,b)=> ( a.worker < b.worker ) ? -1 : ( a.worker > b.worker ) ? 1 : 0 ); ///
       localStorage.setItem('cars', JSON.stringify(cars));
    }
  // carvin unique for each car
    static removeCars(carVin){
       const cars = Store.getCars();

       cars.forEach((car, index) => {
         if(car.carVin === carVin) {
             cars.splice(index, 1);
          }
       });
        localStorage.setItem('cars', JSON.stringify(cars));
    }
 }

 document.addEventListener('DOMContentLoaded', UI.displayCars);
 //Event: Add a  Car:
 document.querySelector('#car-form').addEventListener('submit',(e) => {
// Prevent actual submit
 e.preventDefault();

// Get form Value
const worker = document.querySelector('#worker').value;
const carVin = document.querySelector('#carVin').value;
const strTime = document.querySelector('#strTime').value;
const endTime = document.querySelector('#endTime').value;

//Validate
if(worker === ''|| carVin === ''|| strTime === '' || endTime === ''){
    UI.showAlert('Please fill all fields', 'danger');   
} else {

    //Instatiate book
    const car = new Car(worker, carVin, strTime, endTime);

    // Add book to list 
    // UI.addCarToList(car); ///

    // Add book to local storage
    Store.addCar(car);
    UI.displayCars(); ///

    // Show Success msg
    UI.showAlert('Car Added', 'success');

    //Clear fields
    UI.clearFields();

}
});

//汽车类：表示汽车
班车{
构造器（工人、卡文、标准时间、结束时间）{
这个工人=工人；
这个。卡文=卡文；
this.strTime=strTime；
this.endTime=endTime；
}
}
类用户界面{
静态显示车（）{
const cars=Store.getCars（）；
const list=document.querySelector（“#car list”）///
list.innerHTML=“”///
cars.forEach（（car）=>UI.addCarToList（car））；
}
静态添加列表（car）{
const list=document.querySelector（“#car list”）；
const row=document.createElement（'tr'）；
row.innerHTML=`
${car.worker}
${car.carVin}
${car.strTime}
${car.endTime}
`;
list.appendChild（行）；
}
静态车辆（el）{
if（el.classList.contains（'delete'））{
el.parentElement.parentElement.remove（）；
}
}
静态showAlert（消息、类名）{
const div=document.createElement（'div'）；
div.className=`alert-alert-${className}`；
div.appendChild（document.createTextNode（message））；
const container=document.querySelector（'.container'）；
const form=document.querySelector（“#car form”）；
container.insertBefore（div，form）；
//在3秒内消失
setTimeout（（）=>document.querySelector（'.alert'）.remove（），3000）；
}
静态clearFields（）{
document.querySelector（“#worker”）.value=''；
document.querySelector（'#carVin'）。值=''；
document.querySelector（'#strTime'）。value=''；
document.querySelector（'#endTime'）。值=''；
}
}
班级商店{
静态getCars（）{
出租汽车；
if（localStorage.getItem（'cars'）==null）{
汽车=[]；
}否则{
cars=JSON.parse（localStorage.getItem（'cars'））；
}
返回车辆；
}
静态加法器（car）{
const cars=Store.getCars（）；
汽车。推（汽车）；
cars.sort（（a，b）=>（a.workerb.worker）？1:0）///
setItem（'cars'，JSON.stringify（cars））；
}
//每辆车的卡文都是独一无二的
静态删除车辆（卡文）{
const cars=Store.getCars（）；
汽车。forEach（（汽车，指数）=>{
if（car.carVin===carVin）{
汽车.拼接（索引1）；
}
});
setItem（'cars'，JSON.stringify（cars））；
}
}
document.addEventListener（'DOMContentLoaded'，UI.displayCars）；
//事件：添加汽车：
document.querySelector（“#car form”）.addEventListener（'submit'，（e）=>{
//防止实际提交
e、 预防默认值（）；
//获取表单值
const worker=document.querySelector（'#worker'）.value；
常量carVin=document.querySelector（“#carVin”）.value；
const strTime=document.querySelector（'#strTime'）.value；
const endTime=document.querySelector（“#endTime”）.value；
//证实
如果（worker==''| | carVin==''| | strTime==''| | endTime==''）{
UI.showAlert（'请填写所有字段'，'危险'）；
}否则{
//分期付款书
const car=新车（工人、车辆识别号、标准时间、结束时间）；
//将书添加到列表中
//UI.addCarToList（car）///
//将书本添加到本地存储
商店。addCar（car）；
UI.displayCars（）///
//显示成功消息
UI.showAlert（“添加了汽车”、“成功”）；
//净土
UI.clearFields（）；
}
});

测试，并让我知道这是否接近您想要实现的目标

（我添加的内容在右侧有一个//）

您有两个选项。（1）在添加新条目之前获取本地存储的内容（例如在

Store.addCar（car）

行），添加新条目，并在该点进行排序，然后更新本地存储，或（2）最好不要对本地存储的内容进行排序，并将排序逻辑移动到实际显示或使用此数据的位置。您可能会将排序代码放在addCar（）方法中。我希望能够先看到两个结果，然后在另一个窗体上使用自己的按钮进行排序，在使用相同的初始按钮显示之前，所有条目都将被排序。非常感谢。

// Car Class: Represent a Car
class Car{
  constructor(worker, carVin, strTime, endTime){
        this.worker = worker;
        this.carVin = carVin;
        this.strTime = strTime; 
        this.endTime = endTime; 
    }
 }

class UI {
    static displayCars(){
      const cars = Store.getCars();
      const list = document.querySelector('#car-list'); ///
      list.innerHTML = ""; ///
      cars.forEach((car) => UI.addCarToList(car));
  }
    static addCarToList(car){
      const list = document.querySelector('#car-list');
      const row = document.createElement('tr');
      row.innerHTML = `
      <td>${car.worker}</td>
      <td>${car.carVin}</td>
      <td>${car.strTime}</td>
      <td>${car.endTime}</td>
      <td><a href="#" class="btn btn-danger btn-sm 
      delete">Clear</a></td>`;
      list.appendChild(row);
  }
  static deleteCar(el){
      if(el.classList.contains('delete')){
          el.parentElement.parentElement.remove();
      }
  }
  static showAlert(message, className){
      const div =document.createElement('div');
      div.className = `alert alert-${className}`;
      div.appendChild(document.createTextNode(message));
      const container = document.querySelector('.container');
      const form = document.querySelector('#car-form');
      container.insertBefore(div, form);

      // Vanish in 3 secs
      setTimeout(() => document.querySelector('.alert').remove(),3000);
  }

  static clearFields(){
      document.querySelector('#worker').value = '';
      document.querySelector('#carVin').value = '';
      document.querySelector('#strTime').value = '';
      document.querySelector('#endTime').value = '';
   }

}

class Store{
   static getCars(){
     let cars;
     if(localStorage.getItem('cars') === null){
         cars = [];
      } else {
         cars = JSON.parse(localStorage.getItem('cars'));
     }

      return cars;
    }
    static addCar(car){
       const cars = Store.getCars();
       cars.push(car);
       cars.sort((a,b)=> ( a.worker < b.worker ) ? -1 : ( a.worker > b.worker ) ? 1 : 0 ); ///
       localStorage.setItem('cars', JSON.stringify(cars));
    }
  // carvin unique for each car
    static removeCars(carVin){
       const cars = Store.getCars();

       cars.forEach((car, index) => {
         if(car.carVin === carVin) {
             cars.splice(index, 1);
          }
       });
        localStorage.setItem('cars', JSON.stringify(cars));
    }
 }

 document.addEventListener('DOMContentLoaded', UI.displayCars);
 //Event: Add a  Car:
 document.querySelector('#car-form').addEventListener('submit',(e) => {
// Prevent actual submit
 e.preventDefault();

// Get form Value
const worker = document.querySelector('#worker').value;
const carVin = document.querySelector('#carVin').value;
const strTime = document.querySelector('#strTime').value;
const endTime = document.querySelector('#endTime').value;

//Validate
if(worker === ''|| carVin === ''|| strTime === '' || endTime === ''){
    UI.showAlert('Please fill all fields', 'danger');   
} else {

    //Instatiate book
    const car = new Car(worker, carVin, strTime, endTime);

    // Add book to list 
    // UI.addCarToList(car); ///

    // Add book to local storage
    Store.addCar(car);
    UI.displayCars(); ///

    // Show Success msg
    UI.showAlert('Car Added', 'success');

    //Clear fields
    UI.clearFields();

}
});