# 浏览器缓存 我们当前看似完成了用户登录的功能。但我们在集成测试时会发现：刷新浏览器后登录状态消息，还需要用户重新登录。这显然是一个不可容忍的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) | |