В Angular 8 существует несколько методов работы с локальным хранилищем. Вот некоторые из распространенных подходов:
- Использование API localStorage: Angular предоставляет доступ к API localStorage браузера, который позволяет хранить данные локально на устройстве пользователя. Вы можете использовать объект
localStorageдля установки, получения и удаления элементов из локального хранилища.
Пример использования:
// Storing an item
localStorage.setItem('key', 'value');
// Retrieving an item
const value = localStorage.getItem('key');
// Removing an item
localStorage.removeItem('key');
- Создание LocalStorageService: вы можете создать сервис в Angular, чтобы инкапсулировать функциональность работы с локальным хранилищем. Такой подход позволяет абстрагировать логику хранения и обеспечивает более простой способ управления операциями хранения во всем приложении.
Пример использования:
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 {
const value = localStorage.getItem(key);
return value ? JSON.parse(value) : null;
}
removeItem(key: string): void {
localStorage.removeItem(key);
}
}
- Использование декораторов Angular. Декораторы Angular, такие как
@HostListenerи@HostBinding, можно использовать для создания пользовательских директив или компонентов, которые обрабатывают операции с локальным хранилищем. Эти декораторы позволяют привязывать действия локального хранилища к определенным событиям или свойствам.
Пример использования:
import { Directive, HostListener, HostBinding } from '@angular/core';
@Directive({
selector: '[localStorageExample]'
})
export class LocalStorageExampleDirective {
@HostBinding('localStorageKey') key: string;
@HostListener('change') onChange(): void {
// Perform local storage operations
}
}