每次刷新頁面時都需要重新進行登錄，這是當前系統的最大痛點。之所以會有此情況的發生是由于每次刷新頁面時都會重新的加載javascript代碼。而JS代碼每執行一次便會重新初始化一次TeacherService，隨之帶來的便是其中的isLogin數據源被重置為false。顯示登錄組件也就完成的正常的。 看來要解決用戶刷新后記錄上一次的登錄狀態的問題，把這個登錄狀態放到每次刷新都會重新執行的代碼中是不行了。為了解決頁面刷新后代碼被重新加載而導致無法使用代碼記錄登錄狀態的問題，瀏覽器提供了三個內置對象：document.cookie、Window.sessionStorage、Window.localStorage來解決此問題。使用以以三個對象可以記錄在瀏覽中記錄一些臨時數據，當瀏覽器刷新時這些數據也不會丟失。 >[info] 除上述三者以外，還提供了IndexedDB以及Web SQL用以處理相對復雜以及不太小的數據。 三者雖然都能起到存儲數據的目的，但也有少許的不同。document.cookie出現的最早，未提供任何的API供外部調用，所以使用起來也最不方便；另兩者的出現彌補了document.cookie的不足，是對document.cookie的補充。 | | document.cookie | Window.sessionStorage | Window.localStorage | | --- | --- | --- | ---| | 出現的時間 | 早 | 晚 | 晚 | | 存儲空間 | 4K | 5M | 5M | | API | 無 | 有 | 有 | | 刷新后保持數據 | 是 | 是 | 是 | | 關閉窗口時清除數據★ | 否 | 是 | 否 | | 多窗口訪問同域名時共享數據★ | 是 | 否 | 是 | * ★ 這兩項為互斥條件，關閉窗口時是否清除數據決定了多窗口訪問同域名時數據是否能夠共享。 結合上述特點，本例中將采用Window.sessionStorage來記錄用戶的登錄狀態，當TeacherService中的isLogin方法被調用時，將傳入的登錄狀態值緩存Window.sessionStorage。當程序初始化時按以下流程初始化用戶登錄狀態。  # setIsLogin src/app/service/teacher.service.ts ```typescript /** * 設置登錄狀態 * @param isLogin 登錄狀態 */ setIsLogin(isLogin: boolean) { window.sessionStorage.setItem('isLogin', isLogin ? '1' : '0'); ? this.isLogin.next(isLogin); } ``` * ? sessionStorage只能存儲string類型。所以將isLogin轉換為字符串'1'、'0'進行存儲。 # 獲取登錄狀態 src/app/service/teacher.service.ts ```typescript /** 數據源 */ private isLogin: new BehaviorSubject<boolean>(false); ? private isLogin: BehaviorSubject<boolean>; ? /** 數據源對應的訂閱服務 */ public isLogin$ = this.isLogin.asObservable(); ? public isLogin$: Observable<boolean>; ? constructor(private httpClient: HttpClient) { let isLogin: string = window.sessionStorage.getItem('isLogin'); ? if (isLogin === null) { isLogin = '0'; } this.isLogin = new BehaviorSubject(isLogin === '0' ? false : true); ? this.isLogin$ = this.isLogin.asObservable(); ? } ``` * ? 由暴力的將登錄狀態初始化為false，變更為根據sessionStorage的緩存值來設置 * ? sessionStorage存的時候只支持字符串，取出的結果必然也是字符串類型 # 測試 此時再次登錄系統，刷新后已經不再顯示登錄組件了。  同上圖還可以看出，兩個訪問了相同地址的窗口間相互獨立。任意一個窗口的登錄與注銷都不會影響到其它的窗口。而這利益于sessionStorage的特性：刷新后保持數據以及多窗口訪問同域名時**不**共享數據 瀏覽器的控制臺提供了查看使用sessionStorage存儲數據的詳情  ???????????????????????????????? 以下內容很重要 ???????????????????????????????? >[success] 自此以后，每重啟一次后臺均需要清空一次sessionStorage存儲。其它的CORS錯誤也可能是由于此sessionStorage存儲引發的。 ???????????????????????????????? 以上內容很重要 ???????????????????????????????? # 重構代碼 當前代碼功能雖然實現了但還不夠簡潔，重構如下： src/app/service/teacher.service.ts ```typescript private isLoginCacheKey = 'isLogin'; ? constructor(private httpClient: HttpClient) { const isLogin: string = window.sessionStorage.getItem(this.isLoginCacheKey?); this.isLogin = new BehaviorSubject(this.convertStringToBoolean?(isLogin)); this.isLogin$ = this.isLogin.asObservable(); } setIsLogin(isLogin: boolean) { window.sessionStorage.setItem(this.isLoginCacheKey?, this.convertBooleanToString?(isLogin)); this.isLogin.next(isLogin); } /** * 字符串轉換為boolean * @param value 字符串 * @return 1 true; 其它 false */ convertStringToBoolean?(value: string) { return value === '1'; } /** * boolean轉string * @param value boolean * @return '1' true; '0' false; */ convertBooleanToString?(value: boolean) { return value ? '1' : '0'; } ``` * ? 將字符串聲明為屬性 * ? 定義轉換方法并調用 * ? 定義轉換方法并調用 單元測試略?? # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.6](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.6) | - | | cookie | [https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie) | 5 | | sessionStorage | [https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage) | 5 | | localStorage | [https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage) | 5 | | IndexedDB | [https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API) | 5 |