在Vue3中使用localStorage保存数据的流程步骤

更新时间：2024年06月12日 10:16:43 作者：JJCTO袁龙

在前端开发中,尤其是利用Vue3构建现代Web应用时,掌握如何使用本地存储（localStorage）来保存数据是非常重要的能力,在这篇博客中,我将详细介绍如何在Vue3中使用localStorage保存数据,并提供示例代码来帮助理解,需要的朋友可以参考下

引言

在前端开发中，尤其是利用Vue3构建现代Web应用时，掌握如何使用本地存储（localStorage）来保存数据是非常重要的能力。这不仅可以帮助我们提高应用的性能，还能提供更好的用户体验。在这篇博客中，我将详细介绍如何在Vue3中使用localStorage保存数据，并提供示例代码来帮助理解。

localStorage简介

localStorage 是 Web Storage API 的一部分，允许我们在用户的浏览器中存储和检索数据。与 sessionStorage 不同，localStorage 中的数据在浏览器会话结束后不会被删除，除非显式地被清除。这使得 localStorage 成为持久化数据的理想选择，如用户设置、购物车信息等。

Vue3概述

Vue3 是一个用于构建用户界面的渐进式JavaScript框架。相较于Vue2，Vue3在性能优化、组合API的引入、TypeScript支持等方面有显著提升。下面我们会结合Vue3，来看如何利用 localStorage 来保存数据。

使用Vue3和localStorage保存数据的步骤

Step 1: 创建一个新的Vue 3项目

首先，确保你已经安装了 Vue CLI。如果没有安装，可以使用以下命令进行安装：

npm install -g @vue/cli

然后，创建一个新的 Vue 3 项目：

vue create vue-localstorage-demo

进入项目目录：

cd vue-localstorage-demo

Step 2: 添加保存数据到localStorage的功能

我们将创建一个简单的功能，让用户可以输入数据并将其保存到 localStorage 中，再次加载页面时可以检索和显示这些数据。

创建一个用户输入组件

在 src/components 目录下创建一个新文件 UserInput.vue：

<template>
  <div>
    <input v-model="userData" placeholder="Enter some data" />
    <button @click="saveData">Save Data</button>
    <p>Saved Data: {{ savedData }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'UserInput',
  setup() {
    const userData = ref('');
    const savedData = ref('');

    // 保存数据到localStorage
    const saveData = () => {
      localStorage.setItem('userData', userData.value);
      savedData.value = userData.value;
    };

    // 初始化时从localStorage获取数据
    onMounted(() => {
      savedData.value = localStorage.getItem('userData') || '';
    });

    return {
      userData,
      savedData,
      saveData
    };
  }
};
</script>

<style scoped>
input {
  padding: 8px;
  margin-right: 8px;
}

button {
  padding: 8px 16px;
}
</style>

在这个组件中，我们使用 ref 创建响应式变量 userData 和 savedData。onMounted 钩子用于组件挂载时从 localStorage 获取并显示已有数据。通过 saveData 函数将新输入的数据保存到 localStorage 中。

在主App组件中引入用户输入组件

打开 src/App.vue 并修改如下：

<template>
  <div id="app">
    <UserInput />
  </div>
</template>

<script>
import UserInput from './components/UserInput.vue';

export default {
  name: 'App',
  components: {
    UserInput
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这样我们就完成了在主应用中引入 UserInput 组件的操作。

扩展：使用Vuex和localStorage进行状态管理

对更复杂的应用场景，我们可以借助 Vuex 进行全局状态管理，并结合 localStorage 进行数据持久化。

安装并配置Vuex

首先安装Vuex：

npm install vuex@next

在 src 目录下创建一个 store 文件夹，并在其中创建 index.js 文件：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    userData: localStorage.getItem('userData') || ''
  },
  mutations: {
    setUserData(state, data) {
      state.userData = data;
      localStorage.setItem('userData', data);
    }
  },
  actions: {
    saveUserData({ commit }, data) {
      commit('setUserData', data);
    }
  },
  getters: {
    getUserData: (state) => state.userData
  }
});

export default store;

在 main.js 中引入Vuex store

打开 src/main.js 并进行如下修改：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App)
  .use(store)
  .mount('#app');

修改UserInput组件以利用Vuex

打开 src/components/UserInput.vue 并进行如下修改：

<template>
  <div>
    <input v-model="userData" placeholder="Enter some data" />
    <button @click="saveData">Save Data</button>
    <p>Saved Data: {{ storedData }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';

export default {
  name: 'UserInput',
  setup() {
    const store = useStore();
    const userData = ref('');
    const storedData = computed(() => store.getters.getUserData);

    const saveData = () => {
      store.dispatch('saveUserData', userData.value);
    };

    return {
      userData,
      storedData,
      saveData
    };
  }
};
</script>

<style scoped>
input {
  padding: 8px;
  margin-right: 8px;
}

button {
  padding: 8px 16px;
}
</style>

通过这种方式，我们不仅能确保数据的一致性和可维护性，还能更方便地管理和分享全局状态。

总结

在这篇博客中，我们探讨了如何在 Vue3 中使用 localStorage 来保存数据，从简单的组件内存储到使用 Vuex 进行全局状态管理。通过这些示例和讲解，你应该能够更好地理解和实现 localStorage 在 Vue3 项目中的应用。

以上就是在Vue3中使用localStorage保存数据的流程步骤的详细内容，更多关于Vue3 localStorage保存数据的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

NUXT SSR初级入门笔记(小结)
这篇文章主要介绍了NUXT SSR初级入门笔记(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
Vue 中如何使用 el-date-picker 限制只能选择当天、当天之前或当天之后日期的方法详解
在Vue前端开发中，使用 el-date-picker 组件进行日期选择是常见的需求，有时候我们需要限制用户只能选择当天、当天之前或当天之后的日期，本文将详细介绍如何使用 el-date-picker 组件实现这些限制，让你能够轻松应对各种日期选择场景,需要的朋友可以参考下
2023-09-09
vue element-ui读取pdf文件的方法
这篇文章主要介绍了vue element-ui读取pdf文件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
Vue完整版和runtime版的区别详解
这篇文章主要为大家介绍了Vue完整版和runtime版的区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
深度解读vue-resize的具体用法
这篇文章主要介绍了vue-resize深度解读，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
vue 对axios get pust put delete封装的实例代码
在本篇文章里我们给各位整理的是一篇关于vue 对axios get pust put delete封装的实例代码内容，有需要的朋友们可以参考下。
2020-01-01
Vue3中shallowRef和shallowReactive的性能优化
Vue3中shallowRef和shallowReactive是浅层响应式API,用于性能优化,仅追踪对象或数组第一层属性的变化,本文就来详细的介绍一下具体的使用,感兴趣的可以了解一下
2024-09-09
vue项目打包后上传至GitHub并实现github-pages的预览
这篇文章主要介绍了vue项目打包后上传至GitHub并实现github-pages的预览，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
ElementUI中el-input无法输入、修改及删除问题解决办法
这篇文章主要给大家介绍了关于ElementUI中el-input无法输入、修改及删除问题的解决办法,这种问题产生是因为input在vue中的受控,我们需要去重新改变一下监听和实现,需要的朋友可以参考下
2023-11-11
浅谈Vuejs Prop基本用法
本篇文章主要介绍了Vuejs Prop基本用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08