Angular中LocalStorage的使用

一、參考項目

https://github.com/NilsHolger/angular2todoes

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

二、環境

三、具體操作

1、新建一個ts文件（我的文件路徑 ../src/app/utils/dataStore.ts）

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 setArr(key:string, value:Array<any>):void{
    this.localStorage[key] = value;
  }

  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);
  }
  public removeAll():any{

    this.localStorage.clear();
  }



}

2、在app.module.ts中引用

import {LocalStorage} from "../../utils/dataStore";
...
@NgModule({
   ...
   providers: [LocalStorage,...],
...
}) 

3、在組件（component）中使用

import {LocalStorage} from "../../utils/dataStore";
     // 注入
     constructor(
        private LSData: LocalStorage,
     ...   
     ) 
 
setMessage(name,psd){//舉例
    const json = {userName:name,pass:psd};
    this.LSData.setObject('userMsg',json);//存儲到LocalStorage
}
getMessage(name,psd){//舉例
    const userMsg=this.LSData.getObject('userMsg');//從LocalStorage獲取userMsg
}

    }

做過好久了想起來了更新哈如果有什麼新的見解請多多指教