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

引言

在前端开发中，尤其是利用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>

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