Eros 本地化存储实战持久化与跨页面数据共享的完整答案【免费下载链接】eros 一套 Vue 代码两端原生应用 或许可以叫我 weex-native。项目地址: https://gitcode.com/gh_mirrors/er/eros在原生 App 开发中数据持久化和跨页面数据共享是每个开发者绕不开的两个问题。Eros 是基于 Weex 封装、面向 Vue 写法的一整套开源 App 解决方案——一套 Vue 代码即可编译成 iOS/Android 两端原生应用。它内置的$storage本地化存储 API配合发布订阅机制$event恰好为这两类需求给出了简洁的完整答案。本文带你从零上手快速掌握 Eros 本地存储的全部用法。为什么原生 App 需要本地化存储在 Web 端你可以直接用localStorage但 Weex 编译出来的原生环境里并没有浏览器 API。Eros 把原生存储能力封装成了统一的 Vue 插件——$storage像操作 Vue 实例属性一样简单$storage 提供本地数据同步/异步操作。——src/js/pages/demo/components/core.vue典型使用场景包括持久化用户登录态、Token、上次浏览记录杀进程重启后依然有效⚙️偏好设置主题、语言、功能开关跨页面共享多个页面读写同一份本地数据无需各自维护三步上手$storage 的增、删、查Eros 官方 Demo 中就内置了完整的本地化存储演示页入口定义在路由配置 src/js/config/routes.js 中的demo.storage源码位于 src/js/pages/demo/storage/index.vue。核心 API 只有三个全部是同步方法方法作用示例setSync(key, value)写入字符串或 JSON 对象$storage.setSync(strKey, 123456789)getSync(key)读取数据自动还原对象$storage.getSync(jsonKey)deleteSync(key)删除指定键$storage.deleteSync(strKey)来看 Demo 中新增按钮的完整实现src/js/pages/demo/storage/index.vue#L43-L49add () { this.$storage.setSync(strKey, 123456789); this.$storage.setSync(jsonKey, { text: 123456789 }); this.get(); },只需两步就能完成持久化写入setSync同时保存了纯字符串和 JSON 对象两种形态后者在读取时会自动还原为对象无需手动JSON.parse回读在created生命周期里调用getSync取回数据页面一打开就能恢复上次的状态参见 src/js/pages/demo/storage/index.vue#L31-L33删除则是对称操作#L50-L54del () { this.$storage.deleteSync(strKey); this.$storage.deleteSync(jsonKey); this.get(); }实战演示一个可运行的存储页面Demo 页面的 UI 很直白顶部两条wxc-cell实时展示本地存储中字符串与 JSON 数据下方新增 / 删除两个按钮触发写入和清理。整体结构src/js/pages/demo/storage/index.vuewxc-cell title本地存储字符串数据: :descresultStr || 无/wxc-cell wxc-cell title本地存储 json 数据: :descresultObj.text || 无/wxc-cell这种操作即所见的设计非常适合新手理解数据流向点一次新增两条 cell 的desc立刻从无变为存储值点删除又恢复为空。你可以照着这个页面在自己的项目中快速搭出任何需要持久化的功能。跨页面数据共享$storage 与 $event 的分工需要区分两类需求需求推荐方案特点持久共享跨重启$storage数据落盘任何页面随时读写临时共享本次会话$event发布订阅页面间即时通信不落盘Eros 同样内置了发布订阅示例。A 页面订阅事件src/js/pages/demo/event/a.vue#L19-L24created () { this.$event.on(getParams, (params) { this.paramsData params }); }B 页面在返回前发布事件src/js/pages/demo/event/b.vue#L30-L36emit () { this.$event.emit(getParams, this.eventText) this.$router.back() }选型建议像登录 Token、用户偏好这类下次启动也要用的数据用$storage像从 B 页带回一个参数到 A 页这类一次性传递用$event避免污染本地存储。本地化存储最佳实践清单Key 命名规范化按模块加前缀如user.token、home.lastId避免多业务共用同一命名空间互相覆盖只存必要数据存储容量有限且读取有性能成本大列表、富文本等应走网络 内存缓存⚡同步优先setSync / getSync / deleteSync简单直接对高频写入场景可再评估异步 API避免阻塞渲染读时兜底getSync可能返回undefinedUI 层像 Demo 一样写resultStr || 无做容错及时清理过期的临时数据如活动缓存记得deleteSyncDemo 的删除按钮就是这个用途小结Eros 用$storage三件套setSync/getSync/deleteSync覆盖了原生 App 数据持久化的绝大部分场景语法轻到三行代码即可完成写入、读取与删除再配合$event发布订阅跨页面共享数据的两条路径持久型与会话型就都有了标准答案。建议直接参考 src/js/pages/demo/storage/index.vue 与 src/js/pages/demo/event/a.vue 两个官方示例在你的 Eros 项目里跑起来。【免费下载链接】eros 一套 Vue 代码两端原生应用 或许可以叫我 weex-native。项目地址: https://gitcode.com/gh_mirrors/er/eros创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/8 18:17:16 · 阅读 1.2k Eros 本地化存储实战：持久化与跨页面数据共享的完整答案
Eros 本地化存储实战持久化与跨页面数据共享的完整答案【免费下载链接】eros 一套 Vue 代码两端原生应用 或许可以叫我 weex-native。项目地址: https://gitcode.com/gh_mirrors/er/eros在原生 App 开发中数据持久化和跨页面数据共享是每个开发者绕不开的两个问题。Eros 是基于 Weex 封装、面向 Vue 写法的一整套开源 App 解决方案——一套 Vue 代码即可编译成 iOS/Android 两端原生应用。它内置的$storage本地化存储 API配合发布订阅机制$event恰好为这两类需求给出了简洁的完整答案。本文带你从零上手快速掌握 Eros 本地存储的全部用法。为什么原生 App 需要本地化存储在 Web 端你可以直接用localStorage但 Weex 编译出来的原生环境里并没有浏览器 API。Eros 把原生存储能力封装成了统一的 Vue 插件——$storage像操作 Vue 实例属性一样简单$storage 提供本地数据同步/异步操作。——src/js/pages/demo/components/core.vue典型使用场景包括持久化用户登录态、Token、上次浏览记录杀进程重启后依然有效⚙️偏好设置主题、语言、功能开关跨页面共享多个页面读写同一份本地数据无需各自维护三步上手$storage 的增、删、查Eros 官方 Demo 中就内置了完整的本地化存储演示页入口定义在路由配置 src/js/config/routes.js 中的demo.storage源码位于 src/js/pages/demo/storage/index.vue。核心 API 只有三个全部是同步方法方法作用示例setSync(key, value)写入字符串或 JSON 对象$storage.setSync(strKey, 123456789)getSync(key)读取数据自动还原对象$storage.getSync(jsonKey)deleteSync(key)删除指定键$storage.deleteSync(strKey)来看 Demo 中新增按钮的完整实现src/js/pages/demo/storage/index.vue#L43-L49add () { this.$storage.setSync(strKey, 123456789); this.$storage.setSync(jsonKey, { text: 123456789 }); this.get(); },只需两步就能完成持久化写入setSync同时保存了纯字符串和 JSON 对象两种形态后者在读取时会自动还原为对象无需手动JSON.parse回读在created生命周期里调用getSync取回数据页面一打开就能恢复上次的状态参见 src/js/pages/demo/storage/index.vue#L31-L33删除则是对称操作#L50-L54del () { this.$storage.deleteSync(strKey); this.$storage.deleteSync(jsonKey); this.get(); }实战演示一个可运行的存储页面Demo 页面的 UI 很直白顶部两条wxc-cell实时展示本地存储中字符串与 JSON 数据下方新增 / 删除两个按钮触发写入和清理。整体结构src/js/pages/demo/storage/index.vuewxc-cell title本地存储字符串数据: :descresultStr || 无/wxc-cell wxc-cell title本地存储 json 数据: :descresultObj.text || 无/wxc-cell这种操作即所见的设计非常适合新手理解数据流向点一次新增两条 cell 的desc立刻从无变为存储值点删除又恢复为空。你可以照着这个页面在自己的项目中快速搭出任何需要持久化的功能。跨页面数据共享$storage 与 $event 的分工需要区分两类需求需求推荐方案特点持久共享跨重启$storage数据落盘任何页面随时读写临时共享本次会话$event发布订阅页面间即时通信不落盘Eros 同样内置了发布订阅示例。A 页面订阅事件src/js/pages/demo/event/a.vue#L19-L24created () { this.$event.on(getParams, (params) { this.paramsData params }); }B 页面在返回前发布事件src/js/pages/demo/event/b.vue#L30-L36emit () { this.$event.emit(getParams, this.eventText) this.$router.back() }选型建议像登录 Token、用户偏好这类下次启动也要用的数据用$storage像从 B 页带回一个参数到 A 页这类一次性传递用$event避免污染本地存储。本地化存储最佳实践清单Key 命名规范化按模块加前缀如user.token、home.lastId避免多业务共用同一命名空间互相覆盖只存必要数据存储容量有限且读取有性能成本大列表、富文本等应走网络 内存缓存⚡同步优先setSync / getSync / deleteSync简单直接对高频写入场景可再评估异步 API避免阻塞渲染读时兜底getSync可能返回undefinedUI 层像 Demo 一样写resultStr || 无做容错及时清理过期的临时数据如活动缓存记得deleteSyncDemo 的删除按钮就是这个用途小结Eros 用$storage三件套setSync/getSync/deleteSync覆盖了原生 App 数据持久化的绝大部分场景语法轻到三行代码即可完成写入、读取与删除再配合$event发布订阅跨页面共享数据的两条路径持久型与会话型就都有了标准答案。建议直接参考 src/js/pages/demo/storage/index.vue 与 src/js/pages/demo/event/a.vue 两个官方示例在你的 Eros 项目里跑起来。【免费下载链接】eros 一套 Vue 代码两端原生应用 或许可以叫我 weex-native。项目地址: https://gitcode.com/gh_mirrors/er/eros创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考