关于Angular中LocalStorage的使用

 在前台的页面不需要往数据库中存储数据，但是需要将数据传递到下一个页面。这时候就涉及到了，数据的临时存储。前端的缓存的使用。
相同点：
       1、作用是一样的，sessionStorage和localStorage一样都是用来存储客户端临时信息的对象。
       2、存储内容类型：两者皆储存字符串类型的数据。
       3、数据存储操作：key-value，操作用法相同。
不同点：
  生命周期：
        1、sessionStorage：生命周期是当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储的数据也就被清空了，为了从安全方面考虑建议使用sessionStroage。
      2、localStorage：生命周期是永久，这意味着除非用户显式操作在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
   信息共享：不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
 用法：（用法相同以localstorage为例）
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);

    }

}
2、在文件app.module.ts中引用

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

...

@NgModule({

   ...

   providers: [LocalStorage,...],

...

}) 
3、自己的Component中

   //存储数据

   localStorage.setItem("key","value");

 

   //取出数据

   localStorage.getItem("key");

 

   //清楚数据

   localStorage.removeItem("key");

 

   //清空数据

   localStorage.clear();