場景

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

?

總結

以上是生活随笔為你收集整理的Angular中怎样通过localStorage实现数据持久化-实现存储搜索历史为例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。