Я экспериментировал с Angular 5 в течение последних 2 месяцев, и на этой неделе я начал создавать простые приложения для проверки того, что я узнал. Я получил и сохранил данные в Firebase с помощью модуля HttpClient.
Что делать, если вы хотите сохранить состояние моего приложения локально? Что ж, я знаю, что в Vanilla JavaScript мы можем использовать localSorage или sessionStorage.
Например
// Store localStorage.setItem("email", "[email protected]"); // Fetch document.getElementById("result").innerHTML = localStorage.getItem("email");
Но… должен ли я использовать ванильный JavaScript в проекте, в котором я пишу код на TypeScript? Нужно ли мне создавать собственный сервис Angular с нуля? Не беспокойтесь, angular-webstorage-service решает эту проблему. Продолжайте читать и узнайте, что вам нужно сделать.
Установка
Установите и добавьте зависимость npm к package.json в своем проекте, выполнив следующую команду.
npm install --save
ngx-webstorage-service
Модуль импорта
В свой файл AppModule добавьте следующие файлы импорта.
import { NgModule } from ‘@angular/core’; import { StorageServiceModule } from ‘ ngx-webstorage-service’; @NgModule({ imports: [ StorageServiceModule ] })
Настройте свой сервис
Поскольку вы хотите обрабатывать состояние приложения, вам необходимо создать Service для вызова функций StorageServiceModule.
Необходимый импорт
import { Inject, Injectable } from ‘@angular/core’; import { LOCAL_STORAGE, StorageService } from ‘ngx-webstorage-service’;
В моем примере я храню список дел в массиве объектов в локальном хранилище. Каждый раз, когда я пытаюсь сохранить любую новую задачу в локальном хранилище, я делаю ее копию, отправляю новую задачу и помещаю обновленный массив в локальное хранилище.
import { Inject, Injectable } from '@angular/core'; import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service'; // key that is used to access the data in local storageconst STORAGE_KEY = 'local_todolist'; @Injectable() export class LocalStorageService { anotherTodolist = []; constructor(@Inject(LOCAL_STORAGE) private storage: StorageService) { } public storeOnLocalStorage(taskTitle: string): void { // get array of tasks from local storage const currentTodoList = this.storage.get(STORAGE_KEY) || []; // push new task to array currentTodoList.push({ title: taskTitle, isChecked: false }); // insert updated array to local storage this.storage.set(STORAGE_KEY, currentTodoList); console.log(this.storage.get(STORAGE_KEY) || 'LocaL storage is empty'); } }
Не забудьте добавить StorageService в свой конструктор, уделяя особое внимание @Inject(LOCAL_STORAGE)
У меня нет функции для получения данных из локального хранилища, но я вызываю this.storage.get(STORAGE_KEY)
, чтобы получить массив сразу после его сохранения.
Чтобы удалить данные, просто позвоните this.storage.remove(STORAGE_KEY)
.
После того, как ваш сервис настроен, вам нужно добавить сервер, созданный в массиве провайдеров в app.module.ts
@NgModule({ providers: [LocalStorageService], })
Наконец, импортируйте службу локального хранилища в компонент, объявите ее экземпляр в конструкторе и вызовите метод службы, выполняющий операции с локальным хранилищем. В приведенном ниже фрагменте только для учебника я вызываю службу непосредственно из хука ngOnInit, поэтому новая задача вставляется в локальное хранилище каждый раз при визуализации компонента.
import { LocalStorageService } from './services/localStorage.service'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(private localStorageService: LocalStorageService) {} ngOnInit(): void { const newTodo = 'new todo'; this.localStorageService.storeOnLocalStorage(newTodo); } }
Если вы запустите свое приложение и воспользуетесь компонентом, который вызывает службу, а затем перейдете в DevTools, выберите вкладку «Приложение», нажмите «Локальное хранилище», и отобразится ваш URL-адрес, в котором будет отображаться список задач.
Примечание. Сообщение обновлено недавно не только потому, что я использовал SESSION_STORAGE, а не LOCAL_STORAGE, что вводило в заблуждение, но и потому, что пакет npm был переименован. Спасибо читателям Mike Goodstadt и nik pol.
Я занимаюсь разработкой программного обеспечения в Университете Райерсона и FreeCodeCamp. Если вы хотите узнать обо мне больше, зайдите на мой сайт, Github, Twitter или Instagram.