# 瀏覽器緩存 我們當前看似完成了用戶登錄的功能。但我們在集成測試時會發現：刷新瀏覽器后登錄狀態消息，還需要用戶重新登錄。這顯然是一個不可容忍的BUG。出現該問題的原因在于：瀏覽器每重新請求一次頁面，都會重新執行一次頁面中的javascript（typescript）代碼。也就是說，每刷新一次瀏覽器，則會重新實例化一次Index組件，其組件中的login屬性當然也會被重新初始化為false。當login為false時，當然應該顯示登錄界面了。 ## 緩存 為了解決頁面刷新后代碼被重新加載而導致無法使用代碼記錄登錄狀態的問題，瀏覽器提供了三個內置對象：document.cookie、Window.sessionStorage、Window.localStorage來解決此問題。使用以上三個對象可以記錄在瀏覽中記錄一些臨時數據，當瀏覽器刷新時這些數據也不會丟失。不同的瀏覽器支持的緩存類型也不同，可以在瀏覽器的控制臺中找到它們的身影：  chrome瀏覽器查看瀏覽器緩存方法如上， firefox中查看瀏覽器緩存方法如下：  可見，無論是chrome還是firefox，都提供了對document.cookie、Window.sessionStorage、Window.localStorage三種緩存的支持 。 > [info] 其它的緩存做為上述三種緩存的補充，主要用于處理相對復雜或數據量不太小的數據。 三者雖然都能起到存儲數據的目的，但也有少許的不同。document.cookie出現的最早，未提供任何的API供外部調用，所以使用起來也最不方便；另兩者的出現彌補了document.cookie的不足，是對document.cookie的補充。 | | document.cookie | Window.sessionStorage | Window.localStorage | | --------------------------- | --------------- | --------------------- | ------------------- | | 出現的時間 | 早 | 晚 | 晚 | | 存儲空間 | 4K | 5M | 5M | | API | 無 | 有 | 有 | | 刷新后保持數據 | 是 | 是 | 是 | | 關閉窗口時清除數據★ | 否 | 是 | 否 | | 多窗口訪問同域名時共享數據★ | 是 | 否 | 是 | ★ 這兩項為互斥條件，關閉窗口時是否清除數據決定了多窗口訪問同域名時數據是否能夠共享。 結合上述特點，我們將采用Window.sessionStorage來記錄用戶的登錄狀態，當用戶登錄成功時，將登錄成功的狀態存Window.sessionStorage。 繼而在應用初始化時，可以按以下流程來初始化用戶登錄狀態，從而達到記錄用戶登錄狀態的目的。  ## 寫入緩存 ```typescript +++ b/first-app/src/app/index/index.component.ts @@ -18,5 +18,7 @@ export class IndexComponent implements OnInit { onLogin(teacher: { username: string, name: string, email: string, sex: boolean }): void { console.log(new Date().toTimeString(), '子組件進行了數據彈射', teacher); this.login = true; + // 將登錄狀態寫入緩存 + window.sessionStorage.setItem('login', 'true'); } } ``` ## 組件初始時獲取登錄狀態 ```typescript +++ b/first-app/src/app/index/index.component.ts @@ -13,6 +13,10 @@ export class IndexComponent implements OnInit { } ngOnInit(): void { + // 獲取緩存中的login，能獲取到則設置login為true + if (window.sessionStorage.getItem('login') !== null) { + this.login = true; + } } onLogin(teacher: { username: string, name: string, email: string, sex: boolean }): void { ``` 如此以來，當用戶登錄成功后再次刷新頁面，登錄狀態便得以保留了；同時如果用戶關閉了當前窗口后再重新打開，登錄狀態消失。 ## 本節作業 1. 請在瀏覽器的控制臺中，觀察sessionStorage存儲`login`的狀況。 2. 按此思想，請完成注銷功能。 3. 使用`Window.localStorage`代替`window.sessionStorage`來完成保留登錄狀態的功能。并在同一瀏覽器的多個窗口中打開http://localhost:4200，在一個窗口中完成登錄后，在另一個窗口中刷新界面。觀察兩者的不同。 | 名稱 | 地址 | 備注 | | -------------- | ------------------------------------------------------------ | ---- | | cookie | [https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie) | | | sessionStorage | [https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage) | | | localStorage | [https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage) | | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step3.7.zip](https://github.com/mengyunzhi/angular11-guild/archive/step3.7.zip) | |