数据缓存服务StorageService封装及使用

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

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

  constructor() { }

  get(key:any){
    return JSON.parse(localStorage.getItem(key)||'0')
  }
  set(key:any,value:any){
    localStorage.setItem(key,JSON.stringify(value));
  }
  remove(key:any){
    localStorage.removeItem(key)
  }
}

使用方法：
search.components.ts中，数据缓存到searchlist中。使用生命周期函数，检查每次刷新页面时，如果searchlist存在则从缓存中拿取数据，删除也是。

import { Component, OnInit } from '@angular/core';
//引入服务
import { StorageService } from 'src/app/services/storage.service';
//实例化服务
// var storage = new StorageService();

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

  constructor(public storage:StorageService) {
    //使用服务
    // storage.get();
    // this.storage.get(key);
   }
  public content:string='';
  public historyList:any[] = []; 
  ngOnInit(): void {
    //生命周期函数，如果searchlist存在则从缓存中拿取数据
    var searchlist = this.storage.get('searchlist');
    if(searchlist){
      this.historyList=searchlist;
    }
  }
  //列表中添加历史记录
  doSearch(){
    if(this.historyList.indexOf(this.content)==-1){
      this.historyList.push(this.content);
      this.storage.set('searchlist',this.historyList);

    }
    this.content = '';
    console.log(this.historyList);
  }
  //删除指定记录
  deleteHistory(key:any){
    alert(key);
    this.historyList.splice(key,1);
    this.storage.set('searchlist',this.historyList);
  }
  

}

可以在检查–Application–localStorage中查看到searchlist

最后

以上就是无奈白羊为你收集整理的数据缓存服务StorageService封装及使用的全部内容，希望文章能够帮你解决数据缓存服务StorageService封装及使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。