Локальное хранилище в Ангуляр 2

Question

Мне нужно хранить данные в сеансе браузера и получать данные до завершения сеанса. Как вы используете локальное и сессионное хранилище в Angular 2?

Answer 1

Стандарт localStorage API должен быть доступен, просто сделайте, например:

localStorage.setItem('whatever', 'something');

Это довольно широко поддерживается.

Обратите внимание, что вам нужно будет добавить "dom" к "lib" массив в вашем tsconfig.json если у вас его еще нет

Answer 2

Для хранения данных в локальном хранилище,

localStorage.setItem('key', 'value');

Убедитесь, что значение stringify, например, если у вас есть объект
localStorage.setItem(itemName, JSON.stringify(itemData));

ИЛИ для отдельных пар ключ-значение
localStorage.setItem('currentUser', JSON.stringify({ token: token, name: name }));

И получить данные из локального хранилища
user = JSON.parse(localStorage.getItem(currentUser));

Answer 3

Сохранить в LocalStorage:

localStorage.setItem('key', value);

Для объектов со свойствами:

localStorage.setItem('key', JSON.stringify(object));

Получить из локального хранилища:

localStorage.getItem('key');

Для объектов:

JSON.parse(localStorage.getItem('key'));

Объект localStorage сохранит данные в виде строки и получит в виде строки. Вам нужно проанализировать желаемый результат, если значение объекта хранится в виде строки. например parseInt(localStorage.getItem('key'));

Лучше использовать фреймворк localStroage вместо сторонней библиотеки localStorageService или чего-либо еще, потому что это уменьшает размер вашего проекта.

Answer 4

Вот пример простого сервиса, который использует localStorage для сохранения данных:

import { Injectable } from '@angular/core';

@Injectable()
export class PersistanceService {
  constructor() {}

  set(key: string, data: any): void {
    try {
      localStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.error('Error saving to localStorage', e);
    }
  }

  get(key: string) {
    try {
      return JSON.parse(localStorage.getItem(key));
    } catch (e) {
      console.error('Error getting data from localStorage', e);
      return null;
    }
  }
}

Чтобы использовать эти сервисы, предоставьте их в каком-либо модуле вашего приложения, как обычно, например, в основном модуле. Тогда используйте как это:

import { Injectable } from '@angular/core';

@Injectable()
export class SomeOtherService {

  constructor(private persister: PersistanceService) {}

  someMethod() {
    const myData = {foo: 'bar'};
    persister.set('SOME_KEY', myData);
  }

  someOtherMethod() {
    const myData = persister.get('SOME_KEY');
  }
}

Answer 5

Используйте модуль Angular2 @LocalStorage, который описывается как:

Этот маленький Angular2/typcript-декоратор делает его очень простым для автоматического сохранения и восстановления состояния переменной в вашей директиве (свойство класса) с использованием HTML5' LocalStorage.

Если вам нужно использовать куки, вы должны взглянуть на: https://www.npmjs.com/package/angular2-cookie

Answer 6

Вы также можете рассмотреть возможность использования поддерживаемой мной библиотеки: ngx-store (npm i ngx-store)

Это делает работу с localStorage, sessionStorage и cookie невероятно легкой. Есть несколько поддерживаемых методов для манипулирования данными:

1) Декоратор:

export class SomeComponent {
  @LocalStorage() items: Array<string> = [];

  addItem(item: string) {
    this.items.push(item);
    console.log('current items:', this.items);
    // and that's all: parsing and saving is made by the lib in the background 
  }
}

Переменные, хранящиеся в декораторах, также могут быть общими для разных классов. @TempStorage() (с псевдонимом @SharedStorage())) декоратор рассчитан на это.

2) Простые методы обслуживания:

export class SomeComponent {
  constructor(localStorageService: LocalStorageService) {}

  saveSettings(settings: SettingsInterface) {
    this.localStorageService.set('settings', settings);
  }

  clearStorage() {
    localStorageService.utility
      .forEach((value, key) => console.log('clearing ', key));
    this.localStorageService.clear();
  }
}

3) Шаблон строителя:

interface ModuleSettings {
    viewType?: string;
    notificationsCount: number;
    displayName: string;
}

class ModuleService {
    constructor(public localStorageService: LocalStorageService) {}

    public get settings(): NgxResource<ModuleSettings> {
        return this.localStorageService
            .load(`userSettings`)
            .setPath(`modules`)
            .setDefaultValue({}) // we have to set {} as default value, because numeric `moduleId` would create an array 
            .appendPath(this.moduleId)
            .setDefaultValue({});
    }

    public saveModuleSettings(settings: ModuleSettings) {
        this.settings.save(settings);
    }

    public updateModuleSettings(settings: Partial<ModuleSettings>) {
        this.settings.update(settings);
    }
}

Еще одна важная вещь - вы можете прослушивать (каждое) изменение хранилища, например (код ниже использует синтаксис RxJS v5):

this.localStorageService.observe()
  .filter(event => !event.isInternal)
  .subscribe((event) => {
    // events here are equal like would be in:
    // window.addEventListener('storage', (event) => {});
    // excluding sessionStorage events
    // and event.type will be set to 'localStorage' (instead of 'storage')
  });

WebStorageService.observe() возвращает обычный Observable, так что вы можете архивировать, фильтровать, отказов их и т. д.

Я всегда открыт, чтобы услышать предложения и вопросы, помогающие мне улучшить эту библиотеку и ее документацию.

Answer 7

Локальное хранилище

Синтаксис:

  localStorage.setItem(key,value);
  localStorage.getItem(key);

Пример:

  localStorage.setItem("name","Muthu");
  if(localStorage){   //it checks browser support local storage or not
    let Name=localStorage.getItem("name");
    if(Name!=null){  //  it checks values here or not to the variable
       //do some stuff here...
    }
  }

также вы можете использовать

    localStorage.setItem("name", JSON.stringify("Muthu"));

Элемент набора хранения сеанса

Синтаксис:

  sessionStorage.setItem(key,value);
  sessionStorage.getItem(key);

Пример:

  sessionStorage.setItem("name","Muthu");

  if(sessionStorage){ //it checks browser support session storage/not
    let Name=sessionStorage.getItem("name");

    if(Name!=null){  //  it checks values here or not to the variable
       //do some stuff here...
    }
  }

также вы можете использовать

   sessionStorage.setItem("name", JSON.stringify("Muthu"));

Храните и получайте данные легко

Answer 8

Хранить в LocalStorage:

window.localStorage.setItem(key, data);

Чтобы удалить элемент из LocalStorage:

window.localStorage.removeItem(key);

Чтобы получить предмет из LocalStorage:

window.localStorage.getItem(key);

Вы можете хранить только строку в LocalStorage; если у вас есть объект, сначала вам нужно преобразовать его в строку, как показано ниже:

window.localStorage.setItem(key, JSON.stringify(obj));

И когда вы хотите получить объект из LocalStorage:

const result=JSON.parse(window.localStorage.getItem(key));

Все советы выше одинаковы для SessionStorage.

Вы можете использовать следующий сервис для работы над SessionStorage а также LocalStorage. Все методы в сервисе:

getSession(key: string): any
setSession(key: string, value: any): void
removeSession(key: string): void
removeAllSessions(): void
getLocal(key: string): any
setLocal(key: string, value: any): void
removeLocal(key: string): void 
removeAllLocals(): void

Добавьте эту услугу в свои компоненты, сервисы и...; Не забудьте зарегистрировать сервис в основном модуле.

import { Injectable } from '@angular/core';

@Injectable()
export class BrowserStorageService {

  getSession(key: string): any {
    const data = window.sessionStorage.getItem(key);
    if (data) {
      return JSON.parse(data);
    } else {
      return null;
    }
  }

  setSession(key: string, value: any): void {
    const data = value === undefined ? '' : JSON.stringify(value);
    window.sessionStorage.setItem(key, data);
  }

  removeSession(key: string): void {
    window.sessionStorage.removeItem(key);
  }

  removeAllSessions(): void {
    for (const key in window.sessionStorage) {
      if (window.sessionStorage.hasOwnProperty(key)) {
        this.removeSession(key);
      }
    }
  }

  getLocal(key: string): any {
    const data = window.localStorage.getItem(key);
    if (data) {
      return JSON.parse(data);
    } else {
      return null;
    }
  }

  setLocal(key: string, value: any): void {
    const data = value === undefined ? '' : JSON.stringify(value);
    window.localStorage.setItem(key, data);
  }

  removeLocal(key: string): void {
    window.localStorage.removeItem(key);
  }

  removeAllLocals(): void {
    for (const key in window.localStorage) {
      if (window.localStorage.hasOwnProperty(key)) {
        this.removeLocal(key);
      }
    }
  }
}

Answer 9

Как сказано выше, должно быть: localStorageService.set('key', 'value'); а также localStorageService.get('key');

Answer 10

Мы можем легко использовать localStorage для установки данных и получения данных.

Примечание: он работает как с angular2, так и с angular 4

//set the data
localStorage.setItem(key, value);   //syntax example
localStorage.setItem('tokenKey', response.json().token);

//get the data
localStorage.getItem('tokenKey')

//confirm if token is exist or not
return localStorage.getItem('tokenKey') != null;

Answer 11

Синтаксис набора элементов:

localStorage.setItem(key,value);

Синтаксис получения элемента:

localStorage.getItem(key); 

Пример этого:

localStorage.setItem('email','[e-mail]');
    let mail = localStorage.getItem("email");
    if(mail){ 
       console.log('your email id is', mail);
    }
  }

Answer 12

Действительно элегантным решением являются декораторы. Вы можете использовать их, чтобы отметить переменные, которые вы хотите сохранить.

export class SomeComponent {

  @LocalStorage
  public variableToBeStored: string;

}

Пример того, как этого добиться, есть в этой статье (мой блог)

Answer 13

Установите "angular-2-local-storage"

import { LocalStorageService } from 'angular-2-local-storage';

Answer 14

Установить

npm install --save @ngx-pwa/local-storage

прежде всего вам нужно установить "angular-2-local-storage"

import { LocalStorageService } from 'angular-2-local-storage';

Сохраните в LocalStorage:

localStorage.setItem('key', value);

Получить из локального хранилища:

localStorage.getItem('key');

Answer 15

Чтобы установить элемент или объект в локальном хранилище:

   localStorage.setItem('yourKey', 'yourValue');

Чтобы получить предмет или объект в локальном хранилище, вы должны запомнить свой ключ.

   let yourVariable = localStorage.getItem('yourKey');

Чтобы удалить его из локального хранилища:

   localStorage.removeItem('yourKey');

Answer 16

Вы можете использовать Cyrilletuzi LocalStorage Asynchronous Angular 2+ Service.

Установка:

$ npm install --save @ngx-pwa/local-storage

Использование:

// your.service.ts
import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class YourService {
   constructor(private localStorage: LocalStorage) { }
}

// Syntax
this.localStorage
    .setItem('user', { firstName:'Henri', lastName:'Bergson' })
    .subscribe( () => {} );

this.localStorage
    .getItem<User>('user')
    .subscribe( (user) => { alert(user.firstName); /*should be 'Henri'*/ } );

this.localStorage
    .removeItem('user')
    .subscribe( () => {} );

// Simplified syntax
this.localStorage.setItemSubscribe('user', { firstName:'Henri', lastName:'Bergson' });
this.localStorage.removeItemSubscribe('user');

Больше информации здесь:

https://www.npmjs.com/package/@ngx-pwa/local-storage
https://github.com/cyrilletuzi/angular-async-local-storage