Я экспериментировал с 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.