uniapp页面获取webview页面localStorage.setItem的数据
时间: 2025-04-06 13:03:15 浏览: 69
在 UniApp 中,如果你需要从 WebView 页面获取 `localStorage` 的数据,并将其传递到原生页面(如 Vue 组件),可以按照以下步骤操作:
---
### 实现方案
#### 1. **通过 WebView 提供的 JavaScript 接口**
UniApp 支持通过 `uniWebView` 或者自定义 Web 视图加载网页内容。你可以利用 `window.postMessage()` 将存储在 `localStorage` 内的数据发送给 Native 层。
**示例代码:**
##### (1)Web 端设置 localStorage 并向宿主发送消息
```javascript
// 在 webview 加载的内容中添加此脚本
document.addEventListener('DOMContentLoaded', function () {
// 设置本地存储值
localStorage.setItem('keyName', 'valueContent');
// 向外暴露数据 (例如传入 key 和 value)
window.postMessage({
type: 'localData',
data: { key: 'keyName', value: localStorage.getItem('keyName') }
}, '*');
});
```
##### (2)在 UniApp 容器端监听 postMessage 数据
使用 `onmessage` 监听来自 Webview 发送的消息:
```javascript
<template>
<view>
<!-- 引入外部web -->
<web-view :src="url" @message="handleMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: "https://example.com", // 这里填写目标网站地址
};
},
methods:{
handleMessage(e){
console.log("接收到来自webview的消息:", e.detail);
if(e.detail.data && e.detail.data.type === 'localData'){
const localData = e.detail.data;
alert(`已接收到localStorage键值对:\nKey=${localData.key}\nValue=${localData.value}`);
} else{
console.warn('无法识别的消息类型:', JSON.stringify(e));
}
}
}
}
</script>
```
上述代码展示了如何从嵌套进来的 HTML5 文档中提取出指定的关键字信息并显示它。
#### 2. 使用全局变量共享机制
如果允许的话,在应用生命周期内保持某些关键状态同步,则也可以考虑直接借助于 App.vue 文件内的 Vuex store 来管理跨组件间通讯需求;但这种方式更适合内部模块之间而非完全分离的不同系统交互场合下采用。
---
阅读全文
相关推荐

















