Angular做到简单的toDoList以及数据备份存储

原创

小哥 3年前 (2022-11-14) 阅读数 38 #大杂烩

首先我们编写一个简单的搜索栏，类似于电子商城的搜索如下N酒吧的灰色搜索历史记录。

示例1：类似于JD。com，股份有限公司.搜索：

特征概览可以实时添加搜索历史，可以删除，再次刷新页面时，数据也会保留。

HTML:


   

  

  
    {{item}}

CSS:

.search{
  margin: 20px auto;
  width:  400px;
  input{
    margin-bottom: 20px;
    width: 300px;
    height: 32px;
  }
  button{
    margin-left: 10px;
    width: 80px;
    height: 32px;
  }
}

TS:

import { Component, OnInit } from @angular/core;
import { StorageService } from src/app/services/storage.service;

@Component({
  selector: app-search,
  templateUrl: ./search.component.html,
  styleUrls: [./search.component.scss],
})
export class SearchComponent implements OnInit {
  public keyword = ;
  public historyList = [];
  constructor(public storageService: StorageService) {}

  ngOnInit(): void {
    const searchList = this.storageService.get(searchList);

    if (searchList) {
      this.historyList = searchList;
    }
  }
  public doSearch(): void {
    if (this.historyList.indexOf(this.keyword) === -1) {
      this.historyList.unshift(this.keyword);
      // 该位置以数组形式传递， 在set需要转换json， 在get需要解析为数组并取出。
      this.storageService.set(searchList, this.historyList);
      this.keyword = ;
    }
  }
  public onDelete(index: number): void {
    this.historyList.splice(index, 1);
    this.storageService.set(searchList, this.historyList);
  }
}

效果如图所示：

第二例：ToDoList

功能概述: 在第一示例的基础上，我们也可以点击checkBox实时更改数据状态。
HTML:

搜索条

  

  
  正在运行
  
    
    
      {{ item.title }}
      
    
  
  成功执行
  
    
      {{ item.title }}

CSS:

h2{
  text-align: center;
}
.toDoList{
  margin: 20px auto;
  width:  400px;
  li{
    line-height: 60px;
  }
}

TS:

import { Component, OnInit } from @angular/core;
import { StorageService } from ../../services/storage.service;

@Component({
  selector: app-to-do-list,
  templateUrl: ./to-do-list.component.html,
  styleUrls: [./to-do-list.component.scss],
})
export class ToDoListComponent implements OnInit {
  public toDoData = [];
  public keyword = ;
  public status = false;
  constructor(public storageService: StorageService) {}

  ngOnInit(): void {
    const storageToDoList = this.storageService.get(toDoList);
    if (storageToDoList) {
      this.toDoData = storageToDoList;
    }
  }

  public doAdd(e: any): void {
    if (e.keyCode === 13) {
      if (this.toDoDataHasKeyWord(this.toDoData, this.keyword)) {
        this.toDoData.push({ title: this.keyword, status: this.status });
        this.keyword = ;
        this.storageService.set(toDoList, this.toDoData);
      }
    }
  }
  public onDelete(key: number): void {
    this.toDoData.splice(key, 1);
    this.storageService.set(toDoList, this.toDoData);
  }
  public toDoDataHasKeyWord(toDoData: any[], keyword: any): boolean {
    // 首先不需要异步问题。
    // this.toDoData.forEach((item) => {
    // });

    return !toDoData.some((item) => item.title === keyword);

    //   const { length } = toDoData;
    //   for (let i = 0; i < length; ++i) {
    //     if (toDoData[i].title === keyword) {
    //       return false;
    //     }
    //   }
    //   return true;
    // }
  }

  public changeCheckBox(): void {
    this.storageService.set(toDoList, this.toDoData);
  }
}

结果截图:

他们的服务和数据持久性

Service:

import { Injectable } from @angular/core;

@Injectable({
  providedIn: root,
})
export class StorageService {
  constructor() {}
  public set(key: string, value: any): void {
    localStorage.setItem(key, JSON.stringify(value));
  }
  public get(key: string): any {
    return JSON.parse(localStorage.getItem(key));
  }
  public remove(key: string): void {
    localStorage.removeItem(key);
  }
}

然后我们可以通过Chorme 看localStroage价值状态：