如果你做过 H5、Vue3、Cordova WebView 或任何混合开发，基本都踩过一个经典疑惑：

“为什么我在 B 页面存的东西，A 页面能读到？有时候又读不到？”

看起来像“玄学”，其实本质就两个词：

• origin（同源）
• domain（同域）

这俩名字很像，但行为完全不是一回事。

---

1. 三兄弟先认清：谁管谁

浏览器里有三种常见存储：

存储	生命周期	共享规则
sessionStorage	会话级	tab / WebView 实例隔离
localStorage	持久化	同 origin 共享
cookie	持久化	同 domain 共享

重点来了：
👉 localStorage 看 origin，cookie 看 domain

这就是一切混乱的源头。

---

2. 什么是 origin？（localStorage 的世界观）

origin 可以理解为：

“我是谁的精确身份证”

它由三部分组成：

origin = 协议 + 域名 + 端口

---

举个例子（很关键）

这些是不同 origin：

https://a.com
http://a.com
https://a.com:8080
https://sub.a.com

👉 全都不一样

---

localStorage 的规则很简单：

❗只要 origin 不一样 = 完全隔离

---

现实效果：

• A 页面写 localStorage
• B 页面必须 完全同 origin
• 否则：看不到，碰不到，想不到

---

3. 什么是 domain？（cookie 的世界观）

cookie 的逻辑就“宽松”很多：

“我属于哪个家族”

它只看域名，不看协议和端口。

---

默认 cookie 行为

如果你不设置 domain：

www.a.com

cookie 只能在：

www.a.com

使用

---

如果你设置：

Domain=.a.com

那就变成：

a.com
www.a.com
api.a.com

👉 子域全部共享

---

4. origin vs domain：本质差异（重点）

维度	origin	domain
是否包含协议	✔	❌
是否包含端口	✔	❌
是否支持子域共享	❌	✔
严格程度	极严格	相对宽松

---

一句话总结：

• origin = 精确定位（身份证）
• domain = 家族范围（族谱）

---

5. 三种存储行为一图理解

🧠 sessionStorage（最“孤独”）

每个 tab / WebView 都是独立宇宙

• A 页面 ❌ 看不到 B 页面
• 生命周期结束即消失

---

🧠 localStorage（最“固执”）

只认 origin，不认人

• 同 origin：共享
• 不同 origin：彻底隔离

---

🍪 cookie（最“社交”）

只要是同一个域名家族，都能聊天

• 子域共享
• 全局可见（在 domain 允许情况下）

---

6. 放到真实开发场景（Vue3 + Cordova）

你这个组合特别容易踩坑。

场景：

• A Activity → WebView A
• B Activity → WebView B
• 同一个域名

---

sessionStorage：

❌ 完全隔离（比 PC 更“硬隔离”）

---

localStorage：

✔ 共享（同 origin）

👉 Activity 不影响它

---

cookie：

✔ 全共享（CookieManager 级别）

---

7. 为什么你会觉得“PC 和手机不一样”？

因为你把这两件事混在一起了：

PC 浏览器：

• tab = sessionStorage 单位
• profile = localStorage / cookie

WebView：

• Activity = WebView 实例
• App = 存储容器

---

结果就是：

❗你以为换页面 = 换环境
❗实际上只有 sessionStorage 真换了

---

8. 最容易踩的 4 个坑（重点收藏）

坑 1：子域不共享 localStorage

a.com ❌ www.a.com

---

坑 2：HTTP vs HTTPS

http ❌ https

---

坑 3：端口不同直接隔离

localhost:3000 ❌ localhost:5173

---

坑 4：以为 WebView Activity 会隔离所有存储

👉 实际只有 sessionStorage 被隔离

---

9. 最终记忆口诀（建议背下来）

如果只记一句话：

localStorage 看 origin，cookie 看 domain，sessionStorage 看“窗口/实例”

---

10. 一张终极总结表

存储	共享规则	跨 WebView Activity
sessionStorage	tab / 实例隔离	❌
localStorage	origin 共享	✔
cookie	domain 共享	✔

---

11. 结尾（开发者真相）

浏览器从来不“随机共享数据”，只是规则太细：

• origin 是“精确坐标”
• domain 是“家族范围”
• sessionStorage 是“临时记忆”
• localStorage 是“长期记忆”
• cookie 是“跨系统通行证”