用户登录成功以后我们可以在浏览器的本地存储里存储一下当前用户数据，刷新应用的时候可以读取这些数据，然后恢复一下用户的登录状态。

存储方法

打开 app/service，在这里定义两个方法，先定义一个设置本地存储用的函数，导出一个 setStorage ，它是一个函数，有个 key 参数，类型是 string，还有一个 value 参数，类型是 any。

在这个函数里可以使用浏览器提供的 localStorage.setItem 这个方法把数据放到本地存储里，把 key 交给这个方法，这个参数的值就是数据的名字，对应的值，可以用一下 JSON.stringify，把 value 交给它处理一下。

读取方法

下面再定义一个获取本地存储用的函数，export 一个 getStorage，有个 key 参数，类型是 string，它的值就是要获取到的在本地存储里存储的数据的名字。

这里我们可以用一下 generic 类型，添加一个类型变量，名字可以叫 T，然后设置这个函数返回的值的类型是 T 或者 null 。

在函数里声明一个 data，它的值用一下 localStorage.getItem 这个方法，把 key 交给它。函数最终返回的值可以判断一下 data，如果它有值，就返回 JSON.parse 处理过的 data as T ，不然就返回 null。以后在使用这个 getStorage 函数的时候可以设置一下这个类型参数。

存储还有读取本地存储数据的时候都需要使用数据的名字，下面我们可以导出一个 enum，名字叫 StorageKey，在它里面添加一个 currentUser，对应的值是 currentUser。这样在项目里使用这个 StorageKey 里的 currentUser 的时候，得到的值就会是字符串 currentUser。

恢复

打开 login/provider，在这个组件里可以处理一下用户的登录状态，用一下 useEffect ，第一个参数是一个回调，第二个参数是依赖的数据列表，里面添加一个 currentUser。这样只有这个数据有变化的时候才会执行这个效应。

在这个回调里先判断一下currentUser 不等于 undefined ，如果是的话就执行一下 setStorage 在本地存储里存储点数据，数据的名字是 StorageKey.currentUser，数据的值是 currentUser。

else，不然的话，声明一个 currentUserFromStorage，它的值可以用一下 getStorage 从本地存储里读取数据，类型参数设置成 CurrentUser。要读取的数据的名字是 StorageKey.currentUser。

下面判断一下，如果 currentUserFromStorage 有值，就可以执行一下 setCurrentUser，修改一下 currentUser 这个 state 的值，把 currentUserFromStorage 交给它。

测试

到浏览器上测试一下，打开浏览器的开发者工具，应用，这个选项卡，观察一下本地存储空间。

在登录页面，输入用户名，还有用户的密码，点击登录。成功以后，你会发现，在本地存储空间这里会出现一条名字是 currentUser 的数据，它的值就是登录成功以后获取到的一些数据，比如用户的 id，名字还有令牌。

刷新一下应用的页面，应用重载以后，现在它会读取在浏览器本地存储空间里存储的这个 currentUser 数据，然后恢复一下，也就是把它的值交给应用里的 currentUser 这个状态。在页面头部这里显示的就是当前登录的用户的名字。