在前臺的頁面不需要往資料庫中儲存資料，但是需要將資料傳遞到下一個頁面。這時候就涉及到了，資料的臨時儲存。前端的快取的使用。
相同點：
       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();