angular实现todolist和数据持久化

新建一个Head组件

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

@Component({
  selector: 'app-head',
  templateUrl: './head.component.html',
  styleUrls: ['./head.component.css']
})
export class HeadComponent implements OnInit {

  constructor() {
    
  }
  public str:string='1';
  add(){
    console.log(this.str)
    if(!(this.str=='')){

      if(this.arr.indexOf(this.str)==-1){
    this.arr.push(this.str);}}
    this.str=''
  }
  remove(i){
    this.arr.splice(i,1);
   
  }
  public arr:any[]=[];
}

<div class="form">
<input type="text"  [(ngModel)]="str"><!--双向数据绑定-->
<button (click)="add()">添加</button>
<ul>
  <li *ngFor="let item of arr;let i=index">{{item}}
  <button (click)="remove(i)">删除</button>
  </li>
  <button (click)="clear()" class="clear">清空历史记录</button>
</ul>
</div>

新建一个公共服务类StorageService,将数据存储在localstorage

输入命令

ng g serve  service services/storage

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor() {

  }
  set(arr){
    window.localStorage.setItem('list',arr);
  }
  get(){
    return window.localStorage.getItem('list');
  }
  remove(){
    window.localStorage.removeItem('list');
  }
}

在app.module.js里面的providers中引入这个类，再在Head组件中引入这个类

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

@Component({
  selector: 'app-head',
  templateUrl: './head.component.html',
  styleUrls: ['./head.component.css']
})
export class HeadComponent implements OnInit {

  constructor(public service: StorageService) {
    this.s = service;
  }
  public str:string='1';
  add(){
    console.log(this.str)
    if(!(this.str=='')){

      if(this.arr.indexOf(this.str)==-1){

    this.arr.push(this.str);
    this.s.set(this.arr);}}//增加记录
    this.str=''
  }
  remove(i){
    this.arr.splice(i,1);
    this.s.set(this.arr)//删除一条记录
  }
  clear(){
    this.arr=[];
    this.s.remove();//清除数据
  }
  public arr:any[]=[];
}