如何在Chrome浏览器/CCT与Android WebView间共享localStorage数据？

问题根源 #

Android系统中，WebView组件与Chrome浏览器（包括Chrome Custom Tabs，简称CCT）的存储沙箱完全独立：

• WebView的localStorage数据存储在你的应用私有目录下，仅当前应用可访问
• Chrome/CCT的localStorage属于Chrome应用的存储沙箱，与你的应用隔离
  即使访问同一域名，两者的存储也无法互通，这是系统级的安全隔离机制。

解决方案 #

根据业务需求，可选择以下方案：

方案1：统一使用WebView打开链接（最简单） #

如果业务允许放弃CCT，直接在WebView内加载所有目标链接，这样所有页面的localStorage会处于同一个应用沙箱中，自然实现数据共享。

修改shouldOverrideUrlLoading方法，取消CCT跳转：

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    // 让WebView自行加载链接，不跳转CCT
    view.loadUrl(url);
    return true;
}

方案2：通过后端服务同步数据（最可靠） #

若必须使用CCT，需借助后端服务中转数据，打破沙箱隔离：

1. CCT页面写入数据时：同时将数据提交到后端，关联用户标识（如Cookie、登录Token）
2. WebView读取数据时：先尝试本地读取，若为空则从后端获取并写入localStorage；反之亦然

CCT页面修改示例

<script type="text/javascript">
    function onpageshowMethod(event) {
        // 写入localStorage
        const key = "someKey";
        const value = "someValue";
        window.localStorage.setItem(key, value);
        
        // 同步到后端
        fetch('https://myserver/save-storage', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                key: key,
                value: value,
                userId: document.cookie.match(/userId=([^;]+)/)[1] // 从Cookie获取用户标识
            })
        });
    }
</script>

WebView页面读取示例

<script>
    function readFromLocalStorage() {
        let localValue = window.localStorage.getItem("someKey");
        if (!localValue) {
            // 从后端获取数据
            fetch('https://myserver/get-storage?key=someKey')
                .then(res => res.json())
                .then(data => {
                    if (data.value) {
                        window.localStorage.setItem("someKey", data.value);
                        alert("Some value is: " + data.value);
                    } else {
                        alert("Some value is: null");
                    }
                });
        } else {
            alert("Some value is: " + localValue);
        }
    }
</script>

方案3：通过URL Scheme实现单向数据传递（适合简单场景） #

Chrome Custom Tabs没有直接的JS消息通道，但可通过自定义URL Scheme实现CCT到WebView的单向数据传递：

1. 在Manifest中注册Intent过滤器

<activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- 自定义URL Scheme -->
        <data android:scheme="yourapp" />
    </intent-filter>
</activity>

2. 修改CCT页面脚本

<script type="text/javascript">
    function onpageshowMethod(event) {
        const key = "someKey";
        const value = "someValue";
        window.localStorage.setItem(key, value);
        // 跳转到自定义Scheme传递数据
        window.location.href = `yourapp://sync-storage?key=${key}&value=${encodeURIComponent(value)}`;
    }
</script>

3. 在MainActivity中接收数据并同步到WebView

@Override
protected void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    Uri data = intent.getData();
    if (data != null && "yourapp".equals(data.getScheme())) {
        String key = data.getQueryParameter("key");
        String value = data.getQueryParameter("value");
        if (key != null && value != null) {
            // 将数据写入WebView的localStorage
            myWebView.evaluateJavascript(
                String.format("window.localStorage.setItem('%s', '%s');", key, value),
                null
            );
        }
    }
}

注意：该方案仅支持CCT到WebView的单向传递，若用户提前关闭CCT可能导致数据丢失。

内容的提问来源于stack exchange，提问作者segol234