当前位置:首页 > uni-app

uniapp数据储存

2026-03-05 05:20:33uni-app

uniapp数据存储方法

本地存储(LocalStorage)

使用uni.setStorageSyncuni.getStorageSync进行数据存储和读取,适合存储简单键值对数据。存储的数据在应用关闭后依然存在。

// 存储数据
uni.setStorageSync('key', 'value');

// 读取数据
let value = uni.getStorageSync('key');

// 删除数据
uni.removeStorageSync('key');

全局变量

通过getApp().globalData定义全局变量,适合在页面间共享数据,但应用关闭后数据会丢失。

// 设置全局变量
getApp().globalData.userInfo = {name: 'John'};

// 获取全局变量
let userInfo = getApp().globalData.userInfo;

Vuex状态管理

适用于复杂应用的状态管理,数据存储在内存中,应用关闭后丢失。需要先在store/index.js中配置。

// store/index.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
});

// 页面中使用
this.$store.commit('increment');
console.log(this.$store.state.count);

文件存储

使用uni.saveFileuni.getFileInfo进行文件读写,适合存储较大数据或需要持久化的文件。

// 保存文件
uni.saveFile({
  tempFilePath: 'temp/file/path',
  success(res) {
    console.log(res.savedFilePath);
  }
});

// 获取文件信息
uni.getFileInfo({
  filePath: 'file/path',
  success(res) {
    console.log(res.size);
  }
});

SQLite数据库

通过uni.requireNativePlugin调用原生SQLite插件,适合需要复杂查询和事务处理的场景。

const sqlite = uni.requireNativePlugin('sqlite');
const db = sqlite.openDatabase({name: 'myDB.db'});

db.transaction(tx => {
  tx.executeSql('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT)');
  tx.executeSql('INSERT INTO users (name) VALUES (?)', ['Alice']);
});

云端存储

使用uniCloud.database()访问云数据库,数据存储在服务端,支持跨设备同步。

const db = uniCloud.database();
db.collection('users').add({
  name: 'Bob',
  age: 25
}).then(res => {
  console.log(res);
});

选择依据

  • 临时数据:使用全局变量或Vuex
  • 简单持久化:本地存储
  • 复杂数据结构:SQLite或云数据库
  • 大文件:文件存储
  • 多端同步:云端存储

注意事项

  • 本地存储有大小限制(通常5MB)
  • 敏感数据建议加密后存储
  • 云数据库需要配置服务空间
  • SQLite仅在某些平台可用

uniapp数据储存

标签: 数据uniapp
分享给朋友:

相关文章

vue实现数据联动

vue实现数据联动

Vue 数据联动实现方法 数据联动在 Vue 中通常指多个组件或数据项之间的动态关联更新。以下是几种常见实现方式: 使用 v-model 和计算属性 <template> <…

vue双向实现数据

vue双向实现数据

Vue 双向数据绑定的实现原理 Vue 的双向数据绑定主要通过 v-model 指令实现,其核心是结合了数据劫持(Object.defineProperty 或 Proxy)和发布-订阅模式。以下是具…

uniapp如何赋值

uniapp如何赋值

uniapp 赋值方法 在 uniapp 中,赋值操作可以通过多种方式实现,具体取决于数据类型和场景。 数据绑定赋值 在模板中使用 {{}} 进行数据绑定,通过修改 data 中的值实现动态更新。…

uniapp设置title

uniapp设置title

设置页面标题的方法 在UniApp中设置页面标题可以通过以下几种方式实现,适用于不同场景和需求。 通过pages.json配置 在pages.json文件中,可以为每个页面单独配置导航栏标题。找到对…

uniapp悬浮

uniapp悬浮

实现悬浮效果的方法 在UniApp中实现悬浮效果可以通过CSS的position: fixed或position: sticky属性结合动态样式控制来实现。以下是具体实现方式: 使用CSS固定定位…

uniapp擎

uniapp擎

uniapp 引擎简介 uniapp 是一个基于 Vue.js 的开发框架,允许开发者使用一套代码同时构建跨平台应用(如 iOS、Android、H5、小程序等)。其核心引擎负责将 Vue 语法转换为…