iOS端iframe内嵌Angular PWA的localStorage关闭浏览器后丢失求助

问题原因 #

iOS上的Safari（以及基于WebKit内核的Chrome）存在严格的存储资源管理机制：当浏览器被完全退出（上滑关闭应用）时，跨域iframe的localStorage会被视为临时缓存数据优先清理——这类存储的优先级远低于主域名的本地存储，系统回收内存时会直接清空。

可行解决方案 #

1. 替换localStorage为IndexedDB #

IndexedDB是Web标准的持久化存储API，在iOS WebKit中被标记为“持久化存储”，不会被轻易清空。Angular项目中可以用dexie.js简化操作：

安装依赖：

npm install dexie

创建数据库服务：

import { Injectable } from '@angular/core';
import Dexie from 'dexie';

interface StoredData {
  id: string;
  value: any;
}

@Injectable({ providedIn: 'root' })
export class StorageService extends Dexie {
  private dataTable: Dexie.Table<StoredData, string>;

  constructor() {
    super('PwaStorage');
    this.version(1).stores({
      data: 'id'
    });
    this.dataTable = this.table('data');
  }

  async setItem(key: string, value: any): Promise<void> {
    await this.dataTable.put({ id: key, value });
  }

  async getItem(key: string): Promise<any | null> {
    const item = await this.dataTable.get(key);
    return item?.value ?? null;
  }

  async removeItem(key: string): Promise<void> {
    await this.dataTable.delete(key);
  }
}

2. 请求持久化存储权限 #

通过navigator.storage.persist()向浏览器申请持久化存储权限，确保存储数据不会被系统自动清理。注意：该请求必须由用户交互触发（比如点击按钮），否则会被浏览器拦截：

async function requestPersistentStorage(): Promise<boolean> {
  if ('storage' in navigator && 'persist' in navigator.storage) {
    const granted = await navigator.storage.persist();
    return granted;
  }
  return false;
}

// 在组件中绑定到用户操作，比如按钮点击
async onRequestStoragePermission() {
  const granted = await requestPersistentStorage();
  if (granted) {
    alert('存储权限已开启，数据不会被自动清理');
  } else {
    alert('存储权限未开启，数据可能被系统清理');
  }
}

3. 借助主域名存储中转 #

如果PWA与domainA.com跨域，可以让主页面（网页B）负责存储数据，PWA通过postMessage与主页面交互：

主页面（domainA.com）代码：

window.addEventListener('message', (event) => {
  // 验证PWA域名
  if (event.origin !== 'https://your-pwa-domain.com') return;

  switch (event.data.type) {
    case 'save':
      localStorage.setItem(event.data.key, JSON.stringify(event.data.value));
      break;
    case 'get':
      const value = localStorage.getItem(event.data.key);
      event.source.postMessage({
        type: 'get-response',
        key: event.data.key,
        value: value ? JSON.parse(value) : null
      }, event.origin);
      break;
  }
});

PWA代码：

// 存储数据到主域名
async saveData(key: string, value: any): Promise<void> {
  window.parent.postMessage({
    type: 'save',
    key,
    value
  }, 'https://domainA.com');
}

// 从主域名获取数据
async getData(key: string): Promise<any | null> {
  return new Promise(resolve => {
    const listener = (event: MessageEvent) => {
      if (event.origin === 'https://domainA.com' && event.data.key === key) {
        resolve(event.data.value);
        window.removeEventListener('message', listener);
      }
    };
    window.addEventListener('message', listener);
    window.parent.postMessage({ type: 'get', key }, 'https://domainA.com');
  });
}

4. 同域部署PWA #

如果可能，将PWA部署在domainA.com的子域名下（比如pwa.domainA.com），同域iframe的存储优先级更高，iOS不会轻易清理这类存储。

总结 #

优先尝试IndexedDB+持久化权限的组合方案，这是最可靠的前端持久化方式；如果跨域限制无法规避，选择主域名存储中转；同域部署是最优的环境配置方案。

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