Мне нужно хранить данные в сеансе браузера и извлекать данные до выхода сеанса. Как использовать локальное и сеансовое хранилище в Angular 2?
Локальное хранилище в Angular 2
Ответ 1
Стандартный localStorage
API должен быть доступен, просто выполните, например:
localStorage.setItem('whatever', 'something');
довольно широко поддерживается.
Обратите внимание, что вам нужно добавить "dom"
в массив "lib"
в tsconfig.json
, если у вас его еще нет.
Ответ 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'));
изменение: вы также можете использовать пакет, который основан на нативном API localStoreage (который мы используем выше), чтобы достичь этого, и вы не делаете надо беспокоиться о stringify и разобрать. Оформить заказ на этот пакет для angular 5 и выше. @NGX-PWA/локальное хранение
Ответ 3
Сохранить в LocalStorage:
localStorage.setItem('key', value);
Для объектов со свойствами:
localStorage.setItem('key', JSON.stringify(object));
Получить из локального хранилища:
localStorage.getItem('key');
Для объектов:
JSON.parse(localStorage.getItem('key'));
localStorage Object сохраняет данные как строку и извлекает их как строку. Вам нужно проанализировать желаемый результат, если значение является объектом, хранящимся в виде строки. например parseInt(localStorage.getItem('key'));
Лучше использовать инфраструктуру, предоставляемую localStroage, вместо сторонней библиотеки localStorageService или что-то еще, потому что это уменьшает размер вашего проекта.
Ответ 4
Используйте Angular2 @LocalStorage, который описывается как:
Этот маленький декодер Angular2/typescript позволяет с легкостью сэкономить и автоматически восстановить состояние переменной в вашей директиве (класс свойство) с использованием HTML5 'LocalStorage.
Если вам нужно использовать файлы cookie, вы должны взглянуть на: https://www.npmjs.com/package/angular2-cookie
Ответ 5
Вот пример простой службы, которая использует 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');
}
}
Ответ 6
Элемент локального хранилища
Синтаксис:
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"));
Сохранять и извлекать данные легко
Ответ 7
Вы также можете рассмотреть возможность использования поддерживаемой мной библиотеки: ngx-store (npm я 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 all: parsing and saving is made by the lib in the background
}
}
Переменные, хранящиеся в декораторах, также могут быть разделены между различными классами - для этого также существует @TempStorage()
(с псевдонимом @SharedStorage()
)).
2) Простые методы обслуживания:
export class SomeComponent {
constructor(localStorageService: LocalStorageService) {}
public saveSettings(settings: SettingsInterface) {
this.localStorageService.set('settings', settings);
}
public clearStorage() {
this.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, так что вы можете архивировать, фильтровать, отбрасывать их и т.д.
Я всегда готов услышать предложения и вопросы, помогающие мне улучшить эту библиотеку и ее документацию.
Ответ 8
Как указано выше, должно быть: localStorageService.set('key', 'value');
и localStorageService.get('key');
Ответ 9
Мы можем легко использовать localStorage для установки данных и получения данных.
Примечание: он работает как с угловым 2, так и с угловым 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;
Ответ 10
Синтаксис заданного элемента
localStorage.setItem(key,value);
Синтаксис получения элемента
localStorage.getItem(key);
Пример этого:
localStorage.setItem('email','[email protected]');
let mail = localStorage.getItem("email");
if(mail){
console.log('your email id is', mail);
}
}
Ответ 11
Действительно элегантное решение - декораторы. Вы можете использовать их для обозначения переменных, которые вы хотите сохранить.
export class SomeComponent {
@LocalStorage
public variableToBeStored: string;
}
Ответ 12
Установите "угловое-2-местное хранилище"
import { LocalStorageService } from 'angular-2-local-storage';
Ответ 13
Вы можете использовать службу асинхронного углового 2+ cyrilletuzi LocalStorage.
Установка:
$ 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
Ответ 14
Чтобы установить элемент или объект в локальном хранилище:
localStorage.setItem('yourKey', 'yourValue');
Чтобы получить объект или объект в локальном хранилище, вы должны помнить свой ключ.
let yourVariable = localStorage.getItem('yourKey');
Чтобы удалить его из локального хранилища:
localStorage.removeItem('yourKey');
Ответ 15
устанавливать
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');
Ответ 16
Вы можете использовать следующий сервис для работы с localStorage и sessionStorage в вашем угловом проекте. внедрить эту услугу в ваши компоненты, службы и...
Не забудьте зарегистрировать сервис в своем основном модуле.
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);
}
}
}
}
Ответ 17
Вы можете использовать декораторы для обозначения переменных, которые вы хотите сохранить.
export class SomeComponent {
@LocalStorage
public variableToBeStored: string;
}
Пример того, как его достичь, приведен в этой статье: https://filipmolcik.com/angular-2-local-storage/.