当我们在开发前端应用程序时，需要对数据进行存储和管理。而本地存储还是保存在客户端本地的数据，不需要每次都通过网络请求来获取数据，因此在提高应用性能方面有很大的优势。
本文将介绍在 Angular 中如何实现本地存储，并且提供许多示例代码，以帮助您更好地理解。
使用 LocalStorage 存储数据
Angular 可以很方便的使用 LocalStorage 存储数据。 可以通过浏览器提供的 LocalStorage API 将数据存储在本地，这意味着即使应用程序关闭，数据仍将保存在本地。 如果存储的数据可以被用户删除，例如使用了隐身模式，将会返回 null。 在使用 LocalStorage 时候应该注意存储数据的大小、类型等问题。
- 存储数据
存储数据到 LocalStorage 中，需要用到 localStorage 对象。在存储之前，需要将数据转换为字符串格式。例如，我们可以使用 JSON.stringify() 将对象转换为字符串。
localStorage.setItem('key', JSON.stringify(value));在这里，我们使用了 setItem() 方法来将数据存储在 LocalStorage 中，其中 'key' 是存储数据的键，value 是存储的值。
- 获取数据
获取本地存储中的数据，可以使用 localStorage.getItem() 方法。
const value = localStorage.getItem('key');在这里，我们使用了 getItem() 方法将 'key' 键对应的值取出来。由于 LocalStorage 只能存储字符串类型，因此我们需要使用 JSON.parse() 方法将其转换为对象。
const value = JSON.parse(localStorage.getItem('key'));- 删除数据
要删除 LocalStorage 中的数据，可以使用 removeItem() 方法。需要传入需要删除的键。
localStorage.removeItem('key');使用 SessionStorage 存储数据
除了 LocalStorage，Angular 还支持使用 SessionStorage 存储数据。SessionStorage 与 LocalStorage 类似，但是数据只存在于当前浏览器对应的窗口和标签页中。如果用户关闭了浏览器窗口或标签页，存储的数据也会随之被删除。 因此，SessionStorage 更适合存储会话相关的数据，例如登录凭据等。
- 存储数据
将数据存储到 SessionStorage 中与 LocalStorage 相同。
sessionStorage.setItem('key', JSON.stringify(value));- 获取数据
获取 SessionStorage 中的数据，可以使用 getItem() 方法。
const value = JSON.parse(sessionStorage.getItem('key'));- 删除数据
删除 SessionStorage 中的数据，可以使用 removeItem() 方法。同样，需要传入需要删除的键。
sessionStorage.removeItem('key');示例代码
下面是一个示例代码以展示如何在 Angular 中使用 LocalStorage 存储数据。
我们将声明一个名为 LocalStorageService 的服务，该服务定义了要存储的键和值。
// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LocalStorageService {
setItem(key: string, value: any): void {
localStorage.setItem(key, JSON.stringify(value));
}
getItem(key: string): any {
return JSON.parse(localStorage.getItem(key));
}
removeItem(key: string): void {
localStorage.removeItem(key);
}
}我们可以使用这个服务在组件中存储和获取数据。
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { LocalStorageService } from './local-storage.service';
@Component({
selector: 'app-root',
template: `
<button (click)="storeData()">保存数据</button>
<button (click)="getData()">获取数据</button>
<button (click)="removeData()">删除数据</button>
`
})
export class AppComponent {
testObject = {
name: 'Angela',
age: 25
};
constructor(private storageService: LocalStorageService) {}
storeData(): void {
this.storageService.setItem('testObject', this.testObject);
}
getData(): void {
const data = this.storageService.getItem('testObject');
console.log(data); // { name: 'Angela', age: 25 }
}
removeData(): void {
this.storageService.removeItem('testObject');
}
}总结
在本文中，我们详细介绍了如何在 Angular 中使用 LocalStorage 和 SessionStorage 存储数据。
LocalStorage 可以在多个标签页和窗口中共享数据，而 SessionStorage 只是在当前标签页或浏览器窗口中共享数据。
使用 LocalStorage 和 SessionStorage 存储数据都是十分便捷的。 但它们的数据安全性不高，存储在本地，缓存数据时，不要存储敏感数据。
希望这篇文章能为您提供有关在 Angular 中实现本地存储的指南，并且能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6535831a7d4982a6ebcbb929