当前位置：首页 > VUE

vue实现本地数据存储

2026-01-07 03:28:45VUE

使用 localStorage 或 sessionStorage

Vue 中可以直接调用浏览器提供的 localStorage 或 sessionStorage API 进行数据存储。localStorage 的数据长期保留，而 sessionStorage 仅在当前会话有效。

// 存储数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');
const sessionValue = sessionStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');

// 清空所有数据
localStorage.clear();
sessionStorage.clear();

在 Vue 组件中，可以直接在 methods 或生命周期钩子中调用这些方法。

使用 Vuex 持久化插件（vuex-persistedstate）

如果需要将 Vuex 的状态持久化到本地存储，可以使用 vuex-persistedstate 插件。

安装插件：

npm install vuex-persistedstate

在 Vuex 的 store 配置中使用：

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: {
    user: null,
    token: ''
  },
  plugins: [createPersistedState()]
});

默认情况下，插件会使用 localStorage 存储数据。可以通过配置修改存储方式：

plugins: [
  createPersistedState({
    storage: window.sessionStorage // 使用 sessionStorage
  })
]

使用第三方库（如 PouchDB）

如果需要更复杂的本地数据库功能（如索引、查询），可以使用 PouchDB，它是一个基于 IndexedDB 的浏览器数据库。

安装 PouchDB：

npm install pouchdb

在 Vue 中使用：

import PouchDB from 'pouchdb';

const db = new PouchDB('mydb');

// 存储数据
db.put({
  _id: 'user_1',
  name: 'John',
  age: 30
});

// 获取数据
db.get('user_1').then(doc => {
  console.log(doc);
});

PouchDB 支持离线数据同步，适合需要离线功能的应用程序。

使用 IndexedDB 封装

如果需要直接操作 IndexedDB，可以封装一个简单的工具类：

export class IndexedDBHelper {
  constructor(dbName, storeName) {
    this.dbName = dbName;
    this.storeName = storeName;
    this.db = null;
  }

  openDB() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, 1);

      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        if (!db.objectStoreNames.contains(this.storeName)) {
          db.createObjectStore(this.storeName, { keyPath: 'id' });
        }
      };

      request.onsuccess = (event) => {
        this.db = event.target.result;
        resolve(this.db);
      };

      request.onerror = (event) => {
        reject(event.target.error);
      };
    });
  }

  getItem(id) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readonly');
      const store = transaction.objectStore(this.storeName);
      const request = store.get(id);

      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }

  setItem(data) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite');
      const store = transaction.objectStore(this.storeName);
      const request = store.put(data);

      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  }
}

在 Vue 组件中调用：

const dbHelper = new IndexedDBHelper('myDB', 'users');
await dbHelper.openDB();
await dbHelper.setItem({ id: '1', name: 'Alice' });
const user = await dbHelper.getItem('1');

使用 Cookies

如果需要存储小量数据（如用户偏好或会话标识），可以使用 js-cookie 库操作 Cookies。

安装：

npm install js-cookie

在 Vue 中使用：

import Cookies from 'js-cookie';

// 设置 Cookie
Cookies.set('token', 'abc123', { expires: 7 }); // 7 天后过期

// 获取 Cookie
const token = Cookies.get('token');

// 删除 Cookie
Cookies.remove('token');

Cookies 适合存储少量数据，但大小限制为 4KB 左右。

以上方法可以根据实际需求选择：