移动端iframe内应用localStorage自动删除且与非iframe实例独立的问题

成因分析 #

这是iOS 16.5.1版本中WebKit内核（Safari及iOS端Chrome均基于该内核）的两个特定行为导致的：

1. 存储分区机制：iOS 16.5.1对跨源iframe的存储做了严格分区，将iframe内的应用（A）和直接打开的同域应用（B）归为不同的存储上下文，因此两者的localStorage完全独立；只有同类型实例（两个A或两个B）会共享同一分区的存储，所以能正常同步。
2. 第三方存储自动清除：iOS把跨源iframe的存储判定为「第三方存储」，启用了更严格的过期策略，默认会在30分钟左右自动清除这类存储，而承载页面的存储属于第一方，不受此限制。

解决方案 #

1. 使用Storage Access API #

这是最直接的解决方式，让iframe请求获取第一方存储权限，打破存储隔离并避免被自动清除：

• 在iframe应用中，通过用户交互（比如按钮点击）触发document.requestStorageAccess()，请求访问第一方存储；
• 承载页面需确保没有阻止跨源存储访问的设置，允许该请求；
• 注意：iOS要求该API必须由用户交互触发（不能自动调用），否则会被浏览器拒绝。

2. 改用Cookie替代localStorage #

如果存储的数据大小符合Cookie限制（单Cookie不超过4KB），可以将数据存在Cookie中，并配置正确的属性：

• 设置SameSite=None; Secure属性，确保跨源场景下能被共享；
• 同时设置合适的max-age或expires参数，避免被自动清除；
• 注意Cookie的安全风险，敏感数据需要加密存储。

3. 后端统一存储层 #

将需要同步的数据迁移到后端服务，通过用户身份标识（如登录态）关联数据：

• 不管是iframe内还是直接打开的应用实例，都从后端拉取最新数据，修改后提交到后端；
• 这种方式彻底绕过浏览器存储的隔离限制，兼容性最好，但需要后端配合开发。

4. 升级iOS版本 #

苹果在iOS 16.6及后续版本中修复了WebKit存储分区的部分问题，如果用户可以升级系统，这也是一个可行的备选方案。

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