【发布时间】：2020-02-13 19:37:47
【问题描述】：
我有用户输入（工人姓名、汽车 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 = '';
}
}
// 存储类：句柄存储
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);
// using JSON to convert array to string
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);
// Show Success msg
UI.showAlert('Car Added', 'success');
//Clear fields
UI.clearFields();
}
});
//事件：移除一辆车 ....一些代码...
【问题讨论】：
-
您有两个选择。 (1) 在添加新条目之前获取本地存储的内容（例如在
Store.addCar(car)行），添加新条目，然后在该点进行排序，然后更新本地存储，或者 (2)最好不要对本地存储的内容进行排序，并将排序逻辑移动到实际显示或使用此数据的位置。 -
您可能会将排序代码放在 addCar() 方法中。
-
我希望能够首先看到两个结果，用户输入然后用自己的按钮在另一个表单上排序汽车
标签： javascript html arrays sorting local-storage