uniapp webview共享缓存如何实现

在uniapp中，如何实现webview之间的缓存共享？我需要在不同的webview页面间共享登录状态、本地存储等数据，但尝试了localStorage和uni.setStorage都无法跨webview生效。请问有什么可行的解决方案吗？是否需要配置特定的webview参数或使用其他存储方式？

2 回复

在uniapp中，webview默认共享应用缓存。只需在webview组件中设置src属性，加载的网页即可使用uni-app的缓存机制。无需额外配置，但需注意同源策略限制。


在 UniApp 中，Webview 组件默认与主应用共享缓存（如 localStorage、sessionStorage 和 Cookie），因为它们在同一个浏览器环境中运行。以下是实现方法和注意事项：

实现方式

  1. 直接使用 Webview 加载页面：
    Webview 内嵌的 H5 页面自动继承主应用的缓存数据，无需额外配置。

  2. 通过 URL 传递参数（可选）：
    若需动态共享数据，可通过 URL 参数传递（例如 src="https://example.com?token=xxx"）。

  3. 使用 uni.postMessage 通信：

    • 主应用向 Webview 发送数据：
      // 在 UniApp 中
const webview = this.$scope.$getAppWebview().children()[0];
webview.evalJS("receiveData('" + JSON.stringify(data) + "')");
    • Webview 页面通过监听接收：
      // H5 页面内
function receiveData(data) {
  localStorage.setItem('sharedData', data);
}

代码示例

UniApp 主页面：

<template>
  <webview src="https://your-h5-site.com" @message="handleMessage"></webview>
</template>
<script>
export default {
  methods: {
    handleMessage(e) {
      // 处理从 Webview 发送的数据
      console.log('收到消息:', e.detail.data);
    }
  }
}
</script>

H5 页面：

// 读取主应用缓存
const token = localStorage.getItem('token');

// 向 UniApp 发送数据
uni.postMessage({ data: '来自 H5 的数据' });

注意事项

  • 域名限制：若 H5 与主应用域名不同，可能受浏览器同源策略限制，需确保域名一致或配置 CORS。
  • 缓存清除：清除主应用缓存时，Webview 缓存也会同步清除。
  • 安全性：避免通过缓存传递敏感信息（如密码），建议使用 HTTPS 和安全通信机制。

通过以上方法，可简单实现 UniApp Webview 与 H5 页面的缓存共享。

回到顶部