当前位置:首页 > 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
分享给朋友:

相关文章

uniapp如何赋值

uniapp如何赋值

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

uniapp实现懒加载

uniapp实现懒加载

uniapp实现懒加载的方法 在uniapp中实现懒加载可以通过多种方式,以下是几种常见的方法: 使用uni.lazyLoad组件 uniapp提供了内置的懒加载组件,适用于图片等资源的懒加载。在页…

uniapp改变checkbox选中状态

uniapp改变checkbox选中状态

修改 checkbox 选中状态的方法 在 uniapp 中修改 checkbox 的选中状态可以通过以下几种方式实现: 绑定 v-model 控制状态 通过数据绑定方式控制 checkbox 的…

uniapp实现标题栏渐变

uniapp实现标题栏渐变

实现标题栏渐变的方法 在UniApp中实现标题栏渐变效果,可以通过修改页面的导航栏样式或使用自定义导航栏来实现。以下是几种常见的方法: 方法一:使用原生导航栏渐变 通过修改pages.json中的…

uniapp关闭广告

uniapp关闭广告

关闭广告的方法 在UniApp中关闭广告通常涉及以下几个方法,具体操作取决于广告的类型和集成方式。 移除广告模块 检查项目中是否集成了广告SDK或相关组件,如ad、ad-draw等。在pages.j…

vue实现数据展示

vue实现数据展示

Vue 数据展示的实现方法 在 Vue 中展示数据通常通过数据绑定、指令和组件等方式实现。以下是几种常见的实现方式: 数据绑定与插值表达式 使用双大括号语法 {{ }} 可以直接在模板中展示数据:…