Angular2ローカルストレージLocalStorageの使用法
Angular2 Local Storage Localstorage Usage
ウェブサイトの開発の過程で、ユーザー名やパスワードの記憶など、クライアントに保存する必要のあるユーザーの好みに似たデータが常にあります。最初の一般的な反応はCookieを使用することですが、Cookieの使用には多くの制限があります。したがって、LocalStorageはHTML5仕様から外れ、サイズは5Mです。
Angular2 githubでLocalStorageを使用する例がいくつかありますが、それらのほとんどは2.0。*またはベータに基づいています。最新バージョンのAngular2.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 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、コンポーネントで使用
... // reference import { LocalStorage } from '../core/common/local.storage' // inject constructor( private ls: LocalStorage, ... ) get(): void { // read LocalStorage this.cache = this.ls.getObject('logincache') } set(): void { // write to LocalStorage this.ls.setObject('logincache',this.cache) } V.要約：
連絡を取るのにそれほど時間はかからず、Angular1の根拠はありません。 Angular2を使用するのはより困難です。オンラインリソースが少なすぎて、行くのが非常に難しいです。多くの改訂、エラー、および改訂のみがあります。
以下は、関連するファイルの完全なコードです。別の例ではありませんので、他の機能コードは無視してください。より良い方法があれば、私を訂正してください！
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 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) } }