当前位置:首页 > 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()访问云数据库,数据存储在服务端,支持跨设备同步。

uniapp数据储存

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

选择依据

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

注意事项

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

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

相关文章

vue实现表格读取数据

vue实现表格读取数据

Vue 实现表格数据读取 在 Vue 中实现表格数据读取通常涉及以下关键步骤: 数据绑定与表格渲染 通过 v-for 指令动态渲染表格行,数据通常存储在组件的 data 或 Vuex 状态中: &…

vue怎么实现数据检测

vue怎么实现数据检测

Vue 数据检测的实现方式 Vue 通过响应式系统实现数据检测,核心是利用 Object.defineProperty(Vue 2)或 Proxy(Vue 3)对数据进行劫持,结合发布-订阅模式实现依…

uniapp 消息推送

uniapp 消息推送

uniapp 消息推送实现方法 使用uniPush服务 uniapp官方提供了uniPush服务,支持iOS、Android及小程序平台的消息推送。需要在manifest.json中配置推送模块,并按…

uniapp多环境配置

uniapp多环境配置

多环境配置的必要性 在UniApp开发中,多环境配置能有效区分开发、测试、生产等不同环境的API地址、密钥等参数,避免手动修改代码导致的错误。 创建环境配置文件 在项目根目录下创建env.js或co…

uniapp打包

uniapp打包

uniapp打包步骤 H5平台打包 在项目根目录运行以下命令生成H5资源文件: npm run build:h5 打包完成后,文件默认输出到/dist/build/h5目录,可直接部署到Web服务器…

uniapp 后门

uniapp 后门

关于 uniapp 后门的问题,目前没有权威证据表明 uniapp 官方存在故意植入后门的行为。但作为开发者,需注意以下安全实践: 检查第三方插件和依赖 确保项目中使用的第三方插件来源可靠,定期更新…