在 Android Webview 中传递和检索本地存储值答案

【问题标题】：Passing & Retriving localStorage value in Android Webview在 Android Webview 中传递和检索本地存储值
【发布时间】：2018-06-23 19:22:48
【问题描述】：

背景：

在安卓网页视图中：
- 本地保存的 HTML 文件。
当用户在线时
- URL 被调用，Page A 从网站加载。
- 某些数据存储在localStorage('X') on Page A。
当用户离线时
- 显示 HTML Page B（本地保存）。
- Page B 从localStorage('X') 获取数据并存储在localStorage('Y') 中。
- Page B 在 JavaScript 中对 localStorage('Y') 执行操作。
当用户再次在线时
- 页面A从localStorage('Y')获取数据并存储在localStorage('X')中。

问题

localStorage('X') 值不会传递给localStorage('Y')，反之亦然。

正在寻找：

将localStorage 值从网站传递到本地 HTML 文件的方法以及反之亦然

【问题讨论】：

localStorage 要求两个页面位于同一个域中。如果不是这种情况，您将无法在他们之间共享数据。
@NisargShah 如何将此值从一个域传递到另一个域？
解决方法之一是在本地存储的页面和 PostMessage API 中使用 IFrame。让我看看是否有解释它的答案，或者我会发布一个答案。
@NisargShah 你能详细介绍一下 PostMessage API 吗？如果您提供工作示例，那将是很大的帮助
不幸的是，我对 WebView 没有任何经验，但原则上，我的答案中的解决方案应该可以正常工作。尝试先浏览与 postMessage 相关的链接。它应该足够简单。

【解决方案1】：

您不能使用localStorage 在两个域之间共享数据。

用于跨域共享数据的方法之一是使用postMessage API。除了 MDN 链接，您还可以在此处找到更多详细信息：How do you use window.postMessage across domains?

根据您的情况，您可能需要进行以下更改：

当用户在线时
- 已打开本地保存的Page C
- Page C 在 iframe 元素中打开页面 A。
- 每当Page A需要将任何数据保存到localStorage时，它都会通过postMessage将数据发送到父页面，即Page C。反过来Page C可以将数据保存到localStorage。
当用户离线时
- 显示 HTML Page B（本地保存）。
- 可以参考Page C存储的localStorage中的数据，因为都是离线打开的。

【讨论】：