当前位置:首页 > uni-app

uniapp数据储存

2026-02-06 03:38:14uni-app

uniapp 数据存储方式

本地存储(LocalStorage)
适用于存储简单的键值对数据,数据持久化保存,但容量有限(通常5MB左右)。

// 存储数据
uni.setStorageSync('key', 'value');
// 获取数据
let data = uni.getStorageSync('key');
// 移除数据
uni.removeStorageSync('key');

异步本地存储
适合需要处理异步操作的场景,避免阻塞主线程。

uniapp数据储存

uni.setStorage({
  key: 'key',
  data: 'value',
  success: () => console.log('存储成功')
});

全局变量(globalData)
适用于页面间共享数据,但应用关闭后数据消失。
App.vue中定义:

globalData: { userInfo: null }

在页面中访问:

uniapp数据储存

const app = getApp();
app.globalData.userInfo = {name: 'John'};

数据库存储(SQLite)

适合复杂数据结构或大量数据存储,需插件支持。
安装uni-app的SQLite插件后:

const db = plus.sqlite.openDatabase('myDB.db');
db.executeSql('CREATE TABLE IF NOT EXISTS users(id INTEGER PRIMARY KEY, name TEXT)');

文件系统存储

适用于存储文件或大型数据(如图片、音频)。

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

注意事项

  • 数据安全:敏感数据避免明文存储,可使用加密库处理。
  • 容量限制:LocalStorage和文件存储均有平台限制,需合理规划。
  • 兼容性:SQLite和文件API在部分平台可能需额外配置。

选择建议

  • 简单配置数据:使用LocalStorage
  • 临时共享数据:使用globalData
  • 结构化数据:选择SQLite或云数据库。
  • 大型文件:通过文件API或云存储服务(如uniCloud)。

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

相关文章

vue实现表格数据修改

vue实现表格数据修改

实现表格数据修改的基本思路 在Vue中实现表格数据修改通常涉及以下核心步骤:数据绑定、编辑状态切换、表单输入处理和数据提交。以下是一个典型实现方案: 数据绑定与渲染 使用v-for指令循环渲染表格数…

uniapp面试问啥

uniapp面试问啥

技术基础类问题 UniApp框架特性 跨端实现原理及条件编译的使用场景 如何理解"一次开发,多端运行"的优缺点 rpx与vw/vh单位的适配差异 Vue相关 生命周期在UniA…

uniapp实现懒加载

uniapp实现懒加载

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

uniapp改变checkbox选中状态

uniapp改变checkbox选中状态

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

丸子uniapp

丸子uniapp

丸子UniApp简介 丸子UniApp是一个基于UniApp框架开发的移动应用解决方案,通常用于快速构建跨平台应用(如微信小程序、H5、Android/iOS等)。其核心特点是利用UniApp的“一次…

uniapp $on

uniapp $on

uniapp $on 方法详解 $on 是 UniApp 中用于监听全局事件的 API,常用于跨页面或跨组件通信。它基于 Vue 的事件机制,允许在全局范围内触发和监听自定义事件。 基本语法…