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

最新推荐文章于 2024-02-06 12:05:30 发布

weixin_44580808

最新推荐文章于 2024-02-06 12:05:30 发布

阅读量1.3k

点赞数

分类专栏： work

本文链接：https://blog.youkuaiyun.com/weixin_44580808/article/details/119179133

版权

work 专栏收录该内容

27 篇文章

订阅专栏

这篇博客介绍了如何在Angular应用中利用LocalStorage服务进行数据存储、检索和删除操作。通过`StorageService`服务，实现了在组件中获取和设置搜索历史列表，并在页面刷新时从缓存中恢复数据。同时展示了如何在组件中调用服务的方法来添加、删除历史记录，确保数据在客户端的持久化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
  }
  

}