如何從本地存儲中獲取鍵值並在角度2中的HTML視圖中顯示？

Question

我想從本地存儲中獲取一個鍵值，並在HTML視圖中綁定這個值。我怎樣才能做到這一點角2？

Answer 1

DEMO：https://plnkr.co/edit/iiumw4NWPPIRqG0zLBYP?p=preview

@Component({ 
    selector: 'my-app', 
    template: ` 
    <button (click)="click()">Get Value</button> 
    {{lastname}}` 
}) 
export class AppComponent { 
    constructor(){ 
     localStorage.setItem("lastname", "Smith"); 
    } 

    click(){ 
     this.lastname=localStorage.getItem("lastname"); 
    } 
} 

Answer 2

步驟1：npm install --save angular2-localstorage

步驟2：使用NPM或github上下載庫導入並添加它來引導（）

bootstrap(AppComponent, [OtherProvider, LocalStorage]); 

步驟3：在您的控制器中使用它

@Component({ 
    selector: 'my-app', 
    template: ` 
    <button (click)="click()">Set Value</button> 
    <button (otherClickHandler)="click()">Get Value</button> 
    {{localVar}}` 
}) 
export class SomeComponent { 
    constructor(private ls:LocalStorage) {} 

    clickHandler() { 
    this.ls.set('someKey', 'someValue'); 
    } 
    otherClickHandler() { 
    this.localVar = ls.get('someKey'); 
    } 
}