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

末蓝、 2023-10-07 13:52 20阅读 0赞

## 场景 ##

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/105570017 ][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105570017]

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/105694997][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105694997]

通过以上搭建起Angular项目。

然后参照以下实现

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/105818331][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][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

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

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

ng g service services/storage

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

为了实现存储功能，在服务中新建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里面依赖注入服务

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

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

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

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

并在构造方法中注册服务

constructor(private storage:StorageService) { }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

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

相对应。

在search这个组件的html中

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中查看

![20200428221842136.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105570017]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105694997]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105818331]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105818331
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200428221652969.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200428221754821.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200428221758825.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200428221803339.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20200428221842136.gif]: https://img-blog.csdnimg.cn/20200428221842136.gif