当前位置:首页 > uni-app

uniapp手机存数据

2026-02-06 14:28:49uni-app

本地存储方式

uni.setStorage/uni.getStorage
适用于持久化存储少量数据(如用户登录状态、配置信息),数据以键值对形式保存在本地,关闭应用后仍存在。同步方法会阻塞线程,异步方法通过回调处理结果。

示例代码(异步存储)

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

示例代码(同步读取)

try {
  const value = uni.getStorageSync('token');
  console.log(value); // 输出 abc123
} catch (e) {
  console.error('读取失败');
}

临时存储方式

uni.setStorageSync/uni.getStorageSync
适合保存临时数据(如表单草稿),页面关闭后数据自动清除。同步方法直接返回操作结果,需用try-catch处理异常。

uniapp手机存数据

数据生命周期
仅当前小程序运行期间有效,重启后数据丢失。适用于页面间短时传递复杂对象。

文件系统存储

uni.saveFile/uni.getFileSystemManager
处理大型文件(如图片、音频),需先通过API下载或生成文件,再调用保存接口。文件路径为临时地址,长期保存需配合本地存储记录路径。

保存网络图片示例

uniapp手机存数据

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

SQLite数据库

plus.sqlite
App端专用,适合结构化数据高频读写(如聊天记录)。需创建数据库并执行SQL语句,支持事务处理。

初始化数据库示例

const db = plus.sqlite.openDatabase({
  name: 'mydb',
  path: '_doc/mydb.db'
});
db.executeSql('CREATE TABLE IF NOT EXISTS logs(id INTEGER PRIMARY KEY, content TEXT)');

注意事项

数据安全
敏感信息(如密码)避免直接存储,应加密后配合uni.removeStorage清除。App端使用SQLite时注意防止SQL注入。

平台差异
H5端存储有域名限制,iOS Webview存在5MB上限。App端可通过native.js扩展存储方案,如访问原生NSUserDefaults(iOS)或SharedPreferences(Android)。

标签: 数据手机
分享给朋友:

相关文章

vue实现数据渲染

vue实现数据渲染

Vue 数据渲染的实现方式 Vue.js 提供了多种数据渲染的方式,包括插值表达式、指令和计算属性等。以下是常见的实现方法: 插值表达式 使用双大括号 {{ }} 将数据绑定到模板中,数据变化时会自…

vue实现重置表格数据

vue实现重置表格数据

重置表格数据的方法 在Vue中重置表格数据通常涉及清空或重新初始化数据绑定的数组或对象。以下是几种常见实现方式: 直接重置数据源 对于基于数组的表格数据,可以直接将数据数组重置为空或初始值:…

vue实现手机预览样式

vue实现手机预览样式

实现手机预览样式的方法 在Vue项目中实现手机预览样式,可以通过以下几种方式实现: 使用响应式布局 通过CSS媒体查询设置不同屏幕尺寸的样式,确保页面在手机端正常显示: @media (max-w…

Vue数据依赖实现

Vue数据依赖实现

Vue数据依赖实现原理 Vue的数据依赖实现基于响应式系统,核心是通过Object.defineProperty或Proxy拦截数据变化,结合发布-订阅模式实现依赖收集和更新触发。 核心机制 依赖收…

vue怎么实现数据

vue怎么实现数据

Vue 数据实现方式 Vue 提供了多种方式来实现数据的响应式绑定和管理,核心是通过数据驱动视图的更新。 响应式数据声明 在 Vue 组件中,可以通过 data 选项声明响应式数据。这些数据会被…

react如何设置数据

react如何设置数据

设置数据的常见方法 在React中设置数据通常涉及组件的状态管理,可以通过以下几种方式实现: 使用useState Hook(函数组件) import React, { useState…