uni-app离线本地存储方案

发布于 1周前 作者 eggper 来自 Uni-App

uni-app离线本地存储方案

5+App的离线存储

HTML5+的离线本地存储有如下多种方案：

HTML5标准方案

  • cookie 体量最小，可以设置过期时间。不能跨域。

  • localstorage 适合key、value键值对的存储，数据量一般不超过5M。是常用的轻量数据存储方案。不能跨域。

  • sessionstorage 也是键值对，特点是关闭App就消失了，也不能跨webview，一般不用于持久化数据保存。

  • websql 是手机端关系型数据库，各种手机都支持。注意iOS8、9的wkWebview不支持websql。如果要在iOS8、9上使用websql，请使用uiwebview内核。

  • indexedDB 是HTML5里最新的数据存储规范，但不是基于SQL，而是基于对象。 indexedDB性能更高，全是异步处理，学习难度偏大。最重要的是目前手机端支持度不行。Android4.4以上和iOS8以上才支持indexedDB。

HTML5Plus扩展方案

  • plus.navigator.setCookie 与HTML5的标准cookie相比，plus的扩展主要是为了跨域。所谓跨越，就是本地HTML页面和服务器HTML页面共享cookie数据，或者说本地页面的js可以操作服务器页面产生的cookie。如果没有跨越需求，不需要使用plus扩展。注意iOS8以后的wkWebview不支持setcookie。

  • plus.storage plus.storage也是键值对数据存储。它是把OS给原生App使用的键值对存储数据库封装一层给JS使用。 plus.storage没有理论上的大小限制。也是持久化的，不会被当做缓存清理。 plus.storage相比于localstorage 还有一个特点是可跨域。当一个存储数据，需要被本地和来自服务器的页面同时读写时，就涉及跨域问题。此时HTML5的localstorage不能满足需求，只能使用plus.storage。 plus.storage操作要比localstorage慢几十毫秒，尤其是在循环里调用plus api会放大这种慢。 有网友封装了一个框架，针对key-value数据，在localstorage超过5m时自动切换到plus.storage，参考http://ask.dcloud.net.cn/article/552。虽然这么做听起来有点复杂，但我们对这种追求性能极致的开发者非常赞赏。

  • plus.io plus.io是文件读写，虽然也可以通过读写txt等文件存储数据，但并不如专业的storage和websql方便。 plus.io更多的是用于图片等多媒体文件的本地保存。 比如图文列表的离线使用，一般有2种做法：

    1. 图片下载不通过img的src，而是plus.dowload下载的，先下载图片，存好路径后，然后img的src动态指定文件路径
    2. 图片使用img的src下载，然后用canvas把img存成图片文件。下次不联网，img的scr直接指向本地文件

  • plus.sqllite plus.sqllite是对原生的sqllite的封装。它也是一种可以通过sql在本地增删改查数据库的方案。 有点类似websql，但相对于websql而言，sqllite的好处是：

    1. 可以预置基础数据库，直接打包到app里
    2. 当手机空间不足时，websql可能会被清理，而sqllite不会。

有人问三方清理工具清理垃圾会不会造成某些数据丢失，这个可能性是存在的，但概率并不高，取决于清理软件会不会分析你的存储数据里哪些是可以清除的垃圾数据。除了OS的清理工具外，一般没有root权限的清理工具是拿不到除了plus.io外的你的app的存储数据的。 但在ios上系统存储空间很少的时候，系统会清理 cookie、localstorage、sessionstorage、websql、indexedDB 的数据，此时使用plus.storage、plus.sqllite更安全。

uni-app存储

uni-app的存储方案比5+app要少，因为cookie、localstorage、sessionstorage、websql、indexedDB只有h5端支持，其他端都不支持。 uni.storage的键值对存储，这个是全端支持的。 uni-app的Storage在不同端的实现不同，uni.storage在app侧，映射为plus.storage；h5侧映射为localstorage；各个小程序平台映射为其自带的storage键值对存储：

  • H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
  • App端为原生的plus.storage，无大小限制，不是缓存，持久化
  • 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
  • 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
  • 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
  • 百度、头条小程序文档未说明大小限制

app端还支持2种方案


Harmonyos Next教程
1 回复

在uni-app中，实现离线本地存储的方案主要有几种，包括使用 localStorage、sessionStorage、uni.setStorage/uni.getStorage 以及 uni.setStorageSync/uni.getStorageSync。以下是一些具体的代码案例，展示了如何在uni-app中实现这些存储方案。

1. 使用 localStorage 和 sessionStorage

虽然 localStorage 和 sessionStorage 是Web存储API的一部分，但在uni-app的小程序端并不直接支持。不过，在H5端它们是有效的。

H5端示例：

// localStorage 示例
localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');
console.log(value);  // 输出: value

// sessionStorage 示例
sessionStorage.setItem('sessionKey', 'sessionValue');
let sessionValue = sessionStorage.getItem('sessionKey');
console.log(sessionValue);  // 输出: sessionValue

2. 使用 uni.setStorage 和 uni.getStorage（异步）

这是uni-app推荐的存储方式，适用于所有平台（H5、小程序、App等）。

示例：

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

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

3. 使用 uni.setStorageSync 和 uni.getStorageSync（同步）

如果你更喜欢同步操作，可以使用这些同步方法。注意，虽然它们提供了更直观的控制流，但在复杂的异步操作中可能会导致性能问题。

示例：

// 存储数据
try {
    uni.setStorageSync('syncKey', 'syncValue');
    console.log('同步存储成功');
} catch (e) {
    console.error(e);
}

// 获取数据
try {
    let syncValue = uni.getStorageSync('syncKey');
    console.log(syncValue);  // 输出: syncValue
} catch (e) {
    console.error(e);
}

总结

在uni-app中，根据平台和应用需求选择合适的存储方案至关重要。对于跨平台应用，推荐使用 uni.setStorage 和 uni.getStorage，因为它们提供了广泛的兼容性。对于简单的H5应用，localStorage 和 sessionStorage 也是不错的选择。在性能要求较高的场景下，谨慎使用同步方法。

以上代码案例展示了如何在uni-app中实现离线本地存储，希望对你有所帮助。

回到顶部