当前位置：首页 > uni-app

uniapp持久化存储

2026-03-05 16:04:42uni-app

uniapp持久化存储方法

本地存储（LocalStorage）

使用uni.setStorage和uni.getStorage进行数据存储和读取，适合较小数据量的持久化存储。数据以键值对形式保存，关闭应用后依然存在。

// 存储数据
uni.setStorage({
  key: 'key_name',
  data: 'value'
});

// 读取数据
uni.getStorage({
  key: 'key_name',
  success: function(res) {
    console.log(res.data);
  }
});

同步本地存储

同步方法会阻塞当前线程直到操作完成，适合需要立即获取结果的场景。

uniapp持久化存储

try {
  uni.setStorageSync('key_name', 'value');
  const value = uni.getStorageSync('key_name');
} catch (e) {
  // 错误处理
}

数据库存储（SQLite）

对于复杂数据结构，可以使用SQLite数据库。需通过条件编译区分平台，H5端无法直接使用。

uniapp持久化存储

// #ifdef APP-PLUS
const db = plus.sqlite.openDatabase({
  name: 'db_name',
  path: '_doc/test.db'
});
db.executeSql('CREATE TABLE IF NOT EXISTS test(id INTEGER PRIMARY KEY, name TEXT)');
// #endif

文件系统存储

通过uni.saveFile和uni.getFileSystemManagerAPI操作文件系统，适合存储较大数据或二进制文件。

uni.downloadFile({
  url: 'https://example.com/file',
  success: res => {
    uni.saveFile({
      tempFilePath: res.tempFilePath,
      success: savedFile => {
        console.log(savedFile.savedFilePath);
      }
    });
  }
});

全局变量与Vuex

配合持久化存储使用，将Vuex状态通过插件定期写入本地存储。需安装vuex-persistedstate等插件实现自动同步。

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  plugins: [createPersistedState({
    storage: {
      getItem: key => uni.getStorageSync(key),
      setItem: (key, value) => uni.setStorageSync(key, value),
      removeItem: key => uni.removeStorageSync(key)
    }
  })]
});