每次刷新页面时都需要重新进行登录，这是当前系统的最大痛点。之所以会有此情况的发生是由于每次刷新页面时都会重新的加载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 |