Angular中LocalStorage的使用

最新推荐文章于 2024-09-11 08:35:06 发布

码上生活

最新推荐文章于 2024-09-11 08:35:06 发布

阅读量4.2k

点赞数 1

分类专栏： angular 文章标签： Angular LocalStorage -

本文链接：https://blog.csdn.net/zwt_guiji/article/details/80352507

版权

angular 专栏收录该内容

8 篇文章

订阅专栏

一、参考项目

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
}

    }

做过好久了想起来了更新哈如果有什么新的见解请多多指教吐舌头