7搜索历史记录和ToDoList的数据持久化的实现

最新推荐文章于 2020-07-02 20:06:26 发布

_taylorZ

最新推荐文章于 2020-07-02 20:06:26 发布

阅读量397

点赞数

分类专栏： Angular8 文章标签：数据持久化 localStorage 搜索历史记录 toDoList

本文链接：https://blog.csdn.net/qq_33001647/article/details/100145807

版权

一般在买东西时淘宝、京东上都有搜索框，一搜索，搜索的字符串就会出现在下面的记录里，那么跟着教程来实现搜索历史记录，还有ToDoList以及数据持久化，
先看看效果：
在这里插入图片描述数据持久化是为了防止页面刷新后数据就丢失了，利用localStorage就可以实现数据持久化，下面就大致把主要的实现记录下来
新建一个search组件
前台：

<div id="search">
  <h3>搜索缓存数据功能</h3>
  <input id="textSearch" type="text" [(ngModel)]="keyWord" /><input class="myBtn" (click)="doSearch()" type="button" value="搜索" />

  <hr />

  搜索记录:
  <ul>
    <li *ngFor="let i of searchHistory;let key=index;">
      {
  {i}}-------<input type="button" class="myBtn" value="X" (click)="doDelete(key)" />
    </li>
  </ul>

  <input typ