ローカルストトレージ Angular 2
ブラウザのセッションにデータを保存し、セッションが終了するまでデータを取得する必要があります。 Angular 2でローカルおよびセッションストレージをどのように使用しますか？
標準の localStorage API が利用可能であるべきです。
localStorage.setItem('whatever', 'something');
それは かなり広くサポートされている 。
まだ持っていない場合は、"dom"の"lib"配列にtsconfig.jsonを追加する必要があります。
データをローカルストレージに保存するには、
localStorage.setItem('key', 'value');
たとえばオブジェクトがある場合は、必ず値を文字列化してください。localStorage.setItem(itemName, JSON.stringify(itemData));
個々のキーと値のペアに対してORlocalStorage.setItem('currentUser', JSON.stringify({ token: token, name: name }));
そしてlocalstorageからデータを取得するuser = JSON.parse(localStorage.getItem(currentUser));
edit：これを実現するためにネイティブのlocalStoreage api（上記で使用しているもの）をベースにしたパッケージを使用することもできますし、stringifyやparseを心配する必要はありません。角度5以上でこのパッケージをチェックしてください。 @ ngx-pwa/local-storage
LocalStorageに保存します。
localStorage.setItem('key', value);
プロパティを持つオブジェクトの場合：
localStorage.setItem('key', JSON.stringify(object));
ローカルストレージから取得：
localStorage.getItem('key');
オブジェクトの場合
JSON.parse(localStorage.getItem('key'));
localStorageオブジェクトはデータを文字列として保存し、文字列として取得します 。値が文字列として格納されているオブジェクトの場合は、目的の出力を解析する必要があります。例えばparseInt(localStorage.getItem('key'));
サードパーティのライブラリlocalStorageServiceやその他のものではなく、localStroageで提供されているフレームワークを使用することをお勧めします。プロジェクトサイズが小さくなるからです。
Angular2 @LocalStorage moduleを使用します。
この小さなAngular 2/TypeScriptデコレータは、HTML 5のLocalStorageを使用して、ディレクティブ（クラスプロパティ）内の変数の状態を自動的に保存および復元することを非常に簡単にします。
クッキーを使用する必要がある場合は、次のページをご覧ください。 https://www.npmjs.com/package/angular2-cookie
これは、データを永続化するために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');
}
}
ローカルストレージ設定項目
構文：
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"));
データの保存と取得が簡単
上記のように、localStorageService.set('key', 'value');とlocalStorageService.get('key');であるべきです。
私が管理しているライブラリの使用も検討できます。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) {}
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を返すので、Zip、フィルタ、バウンスなどができます。
私はいつもこのライブラリーとそのドキュメンテーションを改良するのを手伝ってくれる提案や質問に耳を傾けています。
LocalStorageはデータの設定と受信に簡単に使用できます。
注： Angular 2と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;
本当に優雅な解決策はデコレータです。それらを使用して、保存したい変数をマークすることができます。
export class SomeComponent {
@LocalStorage
public variableToBeStored: string;
}
項目またはオブジェクトをローカルストレージに設定するには
localStorage.setItem('yourKey', 'yourValue');
アイテムまたはオブジェクトをローカルストレージに入れるには、キーを覚えておく必要があります。
let yourVariable = localStorage.getItem('yourKey');
ローカルストレージから削除するには
localStorage.removeItem('yourKey');
"angular-2-local-storage"をインストール
import { LocalStorageService } from 'angular-2-local-storage';
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
設定項目の構文は次のとおりです。
localStorage.setItem(key,value);
Get itemの構文は次のとおりです。
localStorage.getItem(key);
この例は次のとおりです。
localStorage.setItem('email','[email protected]');
let mail = localStorage.getItem("email");
if(mail){
console.log('your email id is', mail);
}
}
次のサービスを使用して、angularプロジェクトの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);
}
}
}
}
インストール
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');