当前位置:首页 > uni-app

uniapp持久化存储

2026-02-06 14:09:06uni-app

uniapp持久化存储的方法

uniapp提供了多种持久化存储方案,适用于不同场景的需求。以下是常用的几种方法:

本地存储(LocalStorage)

使用uni.setStorageuni.getStorage实现简单的键值对存储,适合小数据量的持久化。

uniapp持久化存储

// 存储数据
uni.setStorage({
  key: 'keyName',
  data: 'value',
  success: function() {
    console.log('存储成功');
  }
});

// 获取数据
uni.getStorage({
  key: 'keyName',
  success: function(res) {
    console.log(res.data);
  }
});

同步本地存储

同步方法uni.setStorageSyncuni.getStorageSync适合需要立即获取存储结果的场景。

uniapp持久化存储

// 同步存储
try {
  uni.setStorageSync('keyName', 'value');
} catch (e) {
  console.error(e);
}

// 同步获取
try {
  const value = uni.getStorageSync('keyName');
  console.log(value);
} catch (e) {
  console.error(e);
}

数据库存储(SQLite)

对于复杂数据结构,可以使用SQLite数据库。需在manifest.json中配置。

// manifest.json配置
"app-plus": {
  "modules": {
    "SQLite": {}
  }
}
// 使用SQLite
const db = plus.sqlite.openDatabase({
  name: 'testDB',
  path: '_doc/test.db'
});

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

文件存储

对于大型文件或需要长期保存的数据,可以使用文件系统API。

// 写入文件
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
  fs.root.getFile('test.txt', {create: true}, function(fileEntry) {
    fileEntry.createWriter(function(writer) {
      writer.write('文件内容');
    });
  });
});

// 读取文件
plus.io.resolveLocalFileSystemURL('_doc/test.txt', function(entry) {
  entry.file(function(file) {
    const reader = new plus.io.FileReader();
    reader.onloadend = function(e) {
      console.log(this.result);
    };
    reader.readAsText(file);
  });
});

注意事项

  • 本地存储有大小限制(通常5MB左右),不适合存储大量数据。
  • 敏感信息不应直接存储在本地,需加密处理。
  • 不同平台对存储的支持可能略有差异,需测试兼容性。

以上方法可根据具体需求选择,简单数据推荐使用本地存储,复杂数据考虑数据库或文件系统。

标签: 持久uniapp
分享给朋友:

相关文章

uniapp倒计时

uniapp倒计时

uniapp倒计时的实现方法 在uniapp中实现倒计时功能可以通过多种方式完成,以下是几种常见的实现方法: 使用setInterval实现基础倒计时 通过JavaScript的setInterv…

uniapp设置背景

uniapp设置背景

设置全局背景样式 在App.vue文件中添加全局样式,使用page选择器设置页面背景。这种方式会影响所有页面背景。 <style> page { background-color:…

uniapp改变checkbox选中状态

uniapp改变checkbox选中状态

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

uniapp中如何使用iconfont

uniapp中如何使用iconfont

使用 Iconfont 在 Uniapp 中的步骤 下载 Iconfont 资源 访问 Iconfont 官网,选择需要的图标并添加到项目。下载时选择 Font class 格式,解压后会得到 .tt…

海康 uniapp

海康 uniapp

海康威视与UniApp集成方案 海康威视的硬件设备(如摄像头、NVR等)与UniApp结合,通常需要通过海康的开放平台API或SDK实现功能调用。以下是具体实现方法: 获取海康威视开放平台权限 注…

uniapp 美颜

uniapp 美颜

uniapp 美颜实现方法 在uniapp中实现美颜功能可以通过多种方式完成,以下是一些常见的方法: 使用原生插件 uniapp支持调用原生插件实现美颜效果,适用于对性能要求较高的场景。需要开发原生…