面试题：Vue项目中如何使用localStorage实现简单的数据持久化

Question

请描述在Vue项目里，如何利用localStorage将一个用户登录状态（例如isLoggedIn布尔值）进行持久化保存与读取，并在组件挂载和数据变化时处理这些逻辑。

Answer 1

1. 持久化保存：
   • 在用户登录成功后，将isLoggedIn状态保存到localStorage。假设在Vue组件的登录方法中：

   <template>
     <div>
       <button @click="login">登录</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       login() {
         // 模拟登录成功
         const isLoggedIn = true;
         localStorage.setItem('isLoggedIn', JSON.stringify(isLoggedIn));
       }
     }
   };
   </script>
   

2. 读取：
   • 在组件挂载时读取localStorage中的isLoggedIn状态。

   <template>
     <div>
       <p v-if="isLoggedIn">已登录</p>
       <p v-else>未登录</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isLoggedIn: false
       };
     },
     mounted() {
       const storedValue = localStorage.getItem('isLoggedIn');
       if (storedValue) {
         this.isLoggedIn = JSON.parse(storedValue);
       }
     }
   };
   </script>
   

3. 数据变化时处理：
   • 如果isLoggedIn状态在组件内发生变化，需要同步更新localStorage。可以使用Vue的watch选项。

   <template>
     <div>
       <button @click="toggleLogin">切换登录状态</button>
       <p v-if="isLoggedIn">已登录</p>
       <p v-else>未登录</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isLoggedIn: false
       };
     },
     mounted() {
       const storedValue = localStorage.getItem('isLoggedIn');
       if (storedValue) {
         this.isLoggedIn = JSON.parse(storedValue);
       }
     },
     methods: {
       toggleLogin() {
         this.isLoggedIn =!this.isLoggedIn;
       }
     },
     watch: {
       isLoggedIn(newValue) {
         localStorage.setItem('isLoggedIn', JSON.stringify(newValue));
       }
     }
   };
   </script>