Angular 2ローカルストレージLocalStorageの使用

Webサイトの開発過程では、ユーザーの好みを記録するようなデータをクライアントに保存する必要があります.例えば、ユーザー名のパスワードを覚えるなどです.従来の第一反応はクッキーの使用であるが、クッキーの使用には多くの制限がある.そこでHTML 5仕様にはLocalStorageが出てきて、大きさは5 Mです.Angular 2 LocalStorageの使用はgithubでいくつかの例がありますが、ほとんどは2.0.*に基づいています.またはbetaバージョンです.私が使っているのは最新バージョンのAngular 2.1では使えないので、手動で変更しました.
一、githubプロジェクトを参照する:

https://github.com/NilsHolger/angular2todoes

https://github.com/rrgarciach/angular2-local-storage

二、環境:

Angular 2.1

三、実現:
ファイルapp/core/common/localを追加します.storage.ts(ファイル位置は自分好み)

 import {Provider} from '@angular/core'; 
export class LocalStorage {

    public localStorage:any;

    constructor() {
        if (!localStorage) {
            throw new Error('Current browser does not support Local Storage');
        }
        this.localStorage = localStorage;
    }

    public set(key:string, value:string):void {
        this.localStorage[key] = value;
    }

    public get(key:string):string {
        return this.localStorage[key] || false;
    }

    public setObject(key:string, value:any):void {
        this.localStorage[key] = JSON.stringify(value);
    }

    public getObject(key:string):any {
        return JSON.parse(this.localStorage[key] || '{}');
    }

    public remove(key:string):any {
        this.localStorage.removeItem(key);
    }
}
// export const LOCAL_STORAGE_PROVIDERS:any[] = [
//         Provider(LocalStorage, {useClass: LocalStorage})
// ];

四、使用:
1、ファイルapp.module.tsでの参照

 
import { LocalStorage } from './core/common/local.storage';
...
@NgModule({
   ...
   providers: [LocalStorage,...],
...
}) 

2、あなたのComponentで使う

 ...
//   
import { LocalStorage } from '../core/common/local.storage'
     //   
     constructor(
        private ls: LocalStorage,
     ...   
     ) 
 
    get(): void {
        //   LocalStorage
        this.cache = this.ls.getObject("logincache") ; 
    }
    set(): void { 
        //   LocalStorage
        this.ls.setObject("logincache",this.cache) ;
    }

五、まとめ:
まだあまり接触していないし、Angular 1の基礎もないので、Angular 2を使うのは骨が折れる.ネット上の資源が少なすぎて、歩くのがとても難しくて、何度も修正して、間違いを報告して、更に修正します.以下は関連ファイルのすべてのコードです.単独の例ではありませんので、余分な他の機能コードは無視してください.もっと良い方法があれば、指摘してください.
1、ファイルapp/core/common/local.storage.ts

import {Provider} from '@angular/core'; 
export class LocalStorage {

    public localStorage:any;

    constructor() {
        if (!localStorage) {
            throw new Error('Current browser does not support Local Storage');
        }
        this.localStorage = localStorage;
    }

    public set(key:string, value:string):void {
        this.localStorage[key] = value;
    }

    public get(key:string):string {
        return this.localStorage[key] || false;
    }

    public setObject(key:string, value:any):void {
        this.localStorage[key] = JSON.stringify(value);
    }

    public getObject(key:string):any {
        return JSON.parse(this.localStorage[key] || '{}');
    }

    public remove(key:string):any {
        this.localStorage.removeItem(key);
    }
}
// export const LOCAL_STORAGE_PROVIDERS:any[] = [
//         Provider(LocalStorage, {useClass: LocalStorage})
// ];

2、ファイルapp.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import './rxjs-extensions';

import { LocalStorage } from './core/common/local.storage';

import { AppComponent } from './app.component';
import { IndexComponent } from './index/index.component';
import { MainComponent } from './main/main.component';
import { HelpComponent } from './help/help.component';

import { Session } from './core/auth/session';

import { AuthService } from './core/auth/auth.service';
import { UserService } from './core/user/user.service';

import { AppRoutingModule }     from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule, 
  ],
  declarations: [
    AppComponent,IndexComponent,MainComponent,HelpComponent
  ],
  providers: [LocalStorage,AuthService,UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

3、ファイルapp/index/index.component.ts

import { Component,OnInit,Input   } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location }               from '@angular/common';

import { LocalStorage } from '../core/common/local.storage';

import { AuthService } from '../core/auth/auth.service';
import { Session }     from '../core/auth/session'; 
import { User }        from '../core/user/user'; 


import { LoginCache }        from './logincache'; 

@Component({
//  moduleId:module.id,
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit  {
    @Input()
    cache:LoginCache;
    user:User;

    constructor(
        private ls: LocalStorage,
        private authService: AuthService, 
        private route: ActivatedRoute,
        private location: Location
    ) {}

    ngOnInit(): void {
            this.cache = this.ls.getObject("logincache") ; 
    }
    tologin(): void { 
        this.ls.setObject("logincache",this.cache) ;
        this.authService.login(this.cache.account,this.cache.password)
                        .then(user => this.user);
    }

 }

私のその他のブログは同期して更新します:CSDN
github