angular2-localstorageで設定および取得する方法は？
これから レポ 、私はこれを正常に設定しました：
import {Component} from "angular2/core";
import {LocalStorageService} from "angular2-localstorage/LocalStorageEmitter";
@Component({
provider: [LocalStorageService]
})
export class AppRoot{
constructor(private storageService: LocalStorageService){}
...
}
StorageServiceを使用してローカルストレージを設定または取得するにはどうすればよいですか？ドキュメントにも例が見つかりません。
更新しました
いくつかのテストの後、WebStorageを介してDecoratorで動作するように管理しました。
import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";
@Component({})
export class LoginComponent implements OnInit {
@LocalStorage() public username:string = 'hello world';
ngOnInit() {
console.log('username', this.username);
// it prints username hello world
}
}
ただし、Chrome Devを使用してlocalstorageを表示すると、何も表示されません： 
そして別のコンポーネントでは、
import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";
@Component({})
export class DashboardComponent implements OnInit {
@LocalStorage() public username:string;
ngOnInit() {
console.log(this.username);
// it prints null
}
}
サービスは、初期化コードを実行できるようにのみアプリにインポートされます。
あなたがこれを使用することになっている方法は、他の回答が述べたようにデコレータを介しています。
これは、デコレータを使用するすべてのコンポーネントではなく、ルートのほとんどの（アプリ）コンポーネントにのみサービスをインポートする必要があることに注意してください。
更新
また、 命令 のステップ2で、bootstrapの代わりにAppComponentを使用して、最初の方法を使用してみてください。
残念ながら、このライブラリは新しいメンテナを探しています。信頼性がわからない.
私はそれがすでに答えられていることを知っていますが、この答えは答えを理解しやすくすることを目指しています。
まず、メインファイルでこれを行う必要があります。
import {LocalStorageService, LocalStorageSubscriber} from 'angular2-localstorage/LocalStorageEmitter';
var appPromise = bootstrap(MyRootAppComponent, [ LocalStorageService ]);
// register LocalStorage, this registers our change-detection.
LocalStorageSubscriber(appPromise);
次に、[〜＃〜] set [〜＃〜]にコンポーネントのWebStorageをインポートします：
import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";
@Component({})
export class LoginComponent implements OnInit {
@LocalStorage('username') public username:string;
//username as the parameter will help to use get function
ngOnInit() {
this.username = 'hello world';
console.log('username', this.username);
// it prints username hello world
}
}
別のコンポーネントのローカルストレージから値を戻す[〜＃〜] get [〜＃〜]には、次のようにします。
import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";
@Component({})
export class DashboardComponent implements OnInit {
@LocalStorage('username') public username:string;
//need to pass your own key parameter to get the value
ngOnInit() {
console.log(this.username);
// it prints 'hello world'
}
}
chrome dev、localstorageが保存されます： 
GitHub-Pageをご覧ください： https://github.com/marcj/angular2-localstorage
次のように使用するように指示します。
例1
import {LocalStorage} from "angular2-localstorage/WebStorage";
@Component({
selector: 'app-login',
template: `
<form>
<div>
<input type="text" [(ngModel)]="username" placeholder="Username" />
<input type="password" [(ngModel)]="password" placeholder="Password" />
</div>
<input type="checkbox" [(ngModel)]="rememberMe" /> Keep me logged in
<button type="submit">Login</button>
</form>
`
})
class AppLoginComponent {
//here happens the magic. `username` is always restored from the localstorage when you reload the site
@LocalStorage() public username:string = '';
public password:string;
//here happens the magic. `rememberMe` is always restored from the localstorage when you reload the site
@LocalStorage() public rememberMe:boolean = false;
}
例2
import {LocalStorage} from "angular2-localstorage/WebStorage";
@Component({
selector: 'admin-menu',
template: `
<div *ngFor="#menuItem of menuItems() | mapToIterable; #i = index">
<h2 (click)="hiddenMenuItems[i] = !!!hiddenMenuItems[i]">
{{i}}: {{category.label}}
</h2>
<div style="padding-left: 15px;" [hidden]="hiddenMenuItems[i]">
<a href>Some sub menu item 1</a>
<a href>Some sub menu item 2</a>
<a href>Some sub menu item 3</a>
</div>
</div>
`
})
class AdminMenuComponent {
public menuItems = [{title: 'Menu1'}, {title: 'Menu2'}, {title: 'Menu3'}];
//here happens the magic. `hiddenMenuItems` is always restored from the localstorage when you reload the site
@LocalStorage() public hiddenMenuItems:Array<boolean> = [];
//here happens the magic. `profile` is always restored from the sessionStorage when you reload the site from the current tab/browser. This is perfect for more sensitive information that shouldn't stay once the user closes the browser.
@SessionStorage() public profile:any = {};
}
[〜＃〜] update [〜＃〜]
すべてのコンポーネントで使用する場合は、共有サービスを作成する必要があります。
import {LocalStorage} from "angular2-localstorage/WebStorage";
@Injectable()
export class MyStorageService {
@LocalStorage() public username:string = '';
constructor() {}
}
そして、このように使用します（コピー＆ペーストの準備はできません！）
export class Component1 {
private username: string;
constructor(private _storage: MyStorageService) {
this.username = this._storage.username;
}
}
export class Component2 {
private username: string;
constructor(private _storage: MyStorageService) {
this.username = this._storage.username;
}
}
別の注入可能なサービスを作成したい
import { Injectable } from '@angular/core';
@Injectable()
export class LocalStorageService {
constructor() {
//
}
public setData(key:string, data:any) {
localStorage.setItem(key, JSON.stringify(data));
}
public getData(key:string) {
return JSON.parse(localStorage.getItem(key));
}
public removeData(key:string) {
localStorage.removeItem(key);
}
}
そしてあなたのコンポーネントで
import { LocalStorageService } from './../../services/localStorageService';
@Component({
selector: 'member-claims-modal',
templateUrl: './view.html'
})
export class UserComponent {
constructor(private localStorageService:LocalStorageService) {
super();
}
public SampleMethod() {
let cloneData = {
'claims': 'hello'
};
this.localStorageService.setData('claims', cloneData);
let item=this.localStorageService.getData('claims');
consoloe.log(item);
this.localStorageService.removeData('claims');
}
}
ドキュメントから：
LocalStorageデコレーターを使用する
import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";
class MySuperComponent {
@LocalStorage() public lastSearchQuery:Object = {};
@LocalStorage('differentLocalStorageKey') public lastSearchQuery:Object = {};
}
ここにいます： github
以下のように簡単にできます
// tsファイルのいずれかに設定します
localStorage.setItem('variablekey',value);
//他のtsファイルから取得
localStorage.getItem("variablekey");
//値をクリアしたい場合
localStorage.removeItem("variablekey");