Angular中怎样通过localStorage实现数据持久化-实现存储搜索历史为例

场景

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建组件以及组件之间的调用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通过以上搭建起Angular项目。

然后参照以下实现

Angular中实现一个简单的toDoList(待办事项)示例代码：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105818331

实现简单的搜索功能。

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先新建一个service服务，服务中添加查找与添加和删除的公共方法。

比如这里在app/services目录下创建storage服务

ng g service services/storage

 

 

为了实现存储功能，在服务中新建set方法

  set(key,value)
  {
      localStorage.setItem(key,JSON.stringify(value));
  }

为了实现查询功能(记忆/持久化),新建get方法

  get(key)
  {
    //console.log("调用storage中的get方法成功");
    return JSON.parse(localStorage.getItem(key));
  }

为了实现删除功能，新建remove方法

  remove(key)
  {
      localStorage.removeItem(key);

  }

service中完整示例代码

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

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

  constructor() { }

  get(key)
  {
    //console.log("调用storage中的get方法成功");
    return JSON.parse(localStorage.getItem(key));
  }

  set(key,value)
  {
      localStorage.setItem(key,JSON.stringify(value));
  }

  remove(key)
  {
      localStorage.removeItem(key);

  }
}

 

在applmodule.ts中引入创建的服务

import {StorageService} from './services/storage.service';

 

并在MgModule里面的providers里面依赖注入服务

 

 

在使用的页面引入服务并注册服务

这里在search这个组件中调用服务的方法，所以打开search这个组件的ts

import {StorageService} from '../../services/storage.service';

 

并在构造方法中注册服务

constructor(private storage:StorageService) { }

 

 

注意这里调用的路径，service服务与组件的位置关系如下

 

 

这里注册服务时在构造方法中private storage:StorageService，storage名字自己随意起，后面的StorageService要与上面引入时

相对应。

在search这个组件的html中

 

<h2>搜索</h2>

<div class="search">
  <input type="text" [(ngModel)]="keyword" />  <button (click)="doSearch()">搜索</button>

    <hr>
    
    <ul>
      <li *ngFor="let item of historyList;let key=index;">{{item}}   ------ <button (click)="deleteHistroy(key)">X</button></li>
    </ul>


</div>

 

ts中对应的方法doSearch在点击后将数据存储并将此搜索历史存入localStorage

  doSearch(){

    if(this.historyList.indexOf(this.keyword)==-1){

      this.historyList.push(this.keyword);
      this.storage.set('searchlist',this.historyList);

    }    
    this.keyword='';    
  }

 

在重新刷新页面中为了能实现不清空/数据持久化，在ngOnInit中 获取localStorage中值

  ngOnInit(): void {
    var searchlist:any= this.storage.get('searchlist');

    if(searchlist){
      this.historyList=searchlist;        
    }
  }

 

在删除按钮对应的方法中

  deleteHistroy(key){
      
      this.historyList.splice(key,1);
      this.storage.set('searchlist',this.historyList);
  }

 

ts中完整示例代码

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

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


  public keyword:string;
  public historyList:any[]= [];

  constructor(private storage:StorageService) { }

  ngOnInit(): void {
    var searchlist:any=this.storage.get('searchlist');

    if(searchlist){
      this.historyList=searchlist;        
    }
  }

  doSearch(){

    if(this.historyList.indexOf(this.keyword)== -1){

      this.historyList.push(this.keyword);
      this.storage.set('searchlist',this.historyList);

    }    
    this.keyword='';    
  }

  deleteHistroy(key){
      
      this.historyList.splice(key,1);
      this.storage.set('searchlist',this.historyList);
  }

}

 

效果

可以在调试模式下的Application的Storage下的localStorage中查看