用户登录成功以后可以把当前用户相关的数据存储到浏览器的 LocalStorage，也就是本地存储空间里。应用启动以后可以读取存储在本地存储里的当前用户数据，然后恢复一下。

先定义一个组合，在 composables 里面新建一个文件，名字叫 use-local-storage.ts，文件里定义并导出一个函数，名字叫 useLocalStorage ，它是一个箭头函数，有两个参数，一个 key 类型是 string，一个 value? 类型是 any。

这里我们可以设置一下这个函数的类型，添加一个类型参数，名字可以叫 T ，设置一下函数返回的值的类型，返回的是 T 或者 null 或者 void 。

函数里面判断一下 value，如果有值，可以用一下 localStroage.setItem 在浏览器的本地存储里添加一条数据，数据的名字是 key，对应的值可以用一下 JSON.stringify 处理一下 value。

else if ，如果 value 的值是 null，我们可以执行一下 localStorage.removeItem 把 key 交给它，这个方法会从浏览器的本地存储里把指定名字的数据删除掉。

else，如果是其它的情况，可以声明一个 data，用一下 localStorage.getItem 从浏览器的本地存储里，得到名字是 key 的这个数据。返回的值可以判断一下 data，如果它有值返回的值用一下 JSON.parse 处理一下 data，as T， 如果 data 没有值，就返回 null。

login

打开 login 组件，登录成功以后，修改了 currentUser 的值以后，可以再用一下 useLocalStorage，在浏览器的本地存储里存储这个当前用户数据，起个名字叫 currentUser，对应的值是 currentUser.value 。

app

应用初始化以后可以判断一下登录状态，打开 app 这个组件，在这个组件里先用一下 onMounted 这个生命周期，挂载组件以后，声明一个 currentUserFromStorage，它的值可以用一下 useLocalStorage，数据的名字叫 currentUser。

判断一下 currentUserFromStorage，声明一个 currentUser，用一下 useState，状态的名字是 currentUser，然后设置一下 currentUser 的值，让它等于 currentUserFromStorage。

测试

在浏览器测试一下，先刷新一下应用，打开浏览器的开发者工具，在应用选项卡里，找到本地存储空间。然后在登录页面，输入用户名还有密码，点击 登录。你会发现登录成功以后，会在浏览器的本地存储里存储一条数据，数据的名字叫 currentUser。对应的值就是用 JSON.stringify 处理之后的当前用户数据。

再刷新一下应用，你会发现页头这里仍然会显示当前用户的名字，因为应用启动的时候会读取在本地存储里存储的当前用户数据，然后会在应用里恢复 currentUser 这个状态的值。