iOS11 Safari主屏应用localStorage生命周期及相关技术问题咨询

Hey there, this is such a common gotcha with Safari's home screen web apps—glad you're digging into the details! Let's tackle each of your questions clearly:

1. Is there official documentation for this persistent localStorage behavior? #

Apple does document this in their Safari Web Content guidelines, though it's not front-and-center. The key detail is that web apps added to the iOS home screen (including PWAs) run in an isolated storage sandbox, separate from regular Safari tabs. This sandbox's localStorage is marked as persistent by default, which is why it doesn't get wiped when you perform Safari's "Clear History and Website Data" action.

2. What's the lifecycle of localStorage in home screen apps? #

For Safari home screen apps:

• It's persistent by default: Unlike regular Safari tabs (where localStorage can be cleared after inactivity or user-initiated cache wipes), this storage sticks around through app restarts, device reboots, and even iOS updates.
• It's tied to the app's home screen installation: As long as the app remains on your home screen, its localStorage sandbox stays intact.

3. When does this localStorage get cleared? #

There are only a few scenarios:

• You delete the home screen app: Removing the app from your home screen deletes its entire storage sandbox, including localStorage.
• Severe device storage pressure: iOS might purge app data (including web app storage) as a last-ditch effort to free up space, but this is rare and affects all apps, not just web ones.
• Manual reset via re-installation: If you delete and re-add the app, all previous localStorage data will be gone.

4. How can I actively clear localStorage? #

You can do this programmatically within your app using standard JS APIs:

• To wipe all localStorage data:

  localStorage.clear();
  

• To remove a specific key (like a token):

  localStorage.removeItem('auth-token');
  

There's no system-level setting to clear just this storage without deleting the app itself.

5. Can I use localStorage for persistent PWA tokens? #

Yes, this is a valid use case, but keep these considerations in mind:

• Security risks: localStorage is accessible via client-side JS, so it's exposed to XSS attacks. For sensitive authentication tokens, you might want to explore alternatives like HTTP-only cookies (though they have their own PWA quirks) or leveraging the Web Crypto API for more secure storage.
• Persistence reliability: Since Safari guarantees this storage stays intact while the app is installed, it's perfect for keeping users logged in across sessions.
• Device-specific: localStorage is tied to the device, so users will need to re-authenticate on other devices.

Your localStorage testing tool is a great way to validate this behavior—store test values, clear Safari's cache, restart your device, and confirm the values are still present when you open the home screen app.

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