processing / processing/p5.js-web-editor

Local Storage gets deleted on iOS and iPadOS after Browser Restart

Open
#3,182 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug
Dominant language
JavaScript
Stars
1.7k
Forks
1.7k
Avg merge
3d 4h
Merged PRs (30d)
8

Description

p5.js version

v1.9.5 // Web Editor: v2.13.4

What is your operating system?

iOS, iPadOS

Web browser and version

Chrome: 126.0.6478.54; Firefox 127.1 (42781); iPadOS 17.5.1

Actual Behavior

While using the p5.js web editor: When saving something in local storage using the storeItem([key], value) function, the local storage gets deleted on iOS and iPadOS after closing the browser. The type of browser does not matter. I've tried on Chrome, Firefox and Safari.

It should not be a problem with my privacy settings, because lokal storage on other Websites (like https://mdn.github.io/dom-examples/web-storage/ ) works fine, even after restarting the browser.

It also appears not to be a problem with my code, because the same code works fine on different browsers on Windows, Android AND macOS.

Expected Behavior

I would expect no different behaviour of persistent local storage on iOS and iPadOS.

Steps to reproduce
  1. access via p5.js web editor on iOS or iPadOS on any browser: https://editor.p5js.org/fl-ing/sketches/G-4fSKqjH
  2. run it and tap a few times to store the score in local storage
  3. restart the browser and run the scetch again
Probable Cause of the issue

After some research, I suspect that the issue arises due to the scetch being contained in an <iframe> Tag (preview.p5js.org) and the local storage object being stored in the browser under that subdomain. The local storage beeing cleared after a browser reset is likely a WebKit security measure to prevent third party tracking ("Intelligent Tracking Prevention" https://webkit.org/blog/7675/intelligent-tracking-prevention/). One solution could be to store and access the local storage object under the domain editor.p5js.org. But this exceeds the scope of my understanding.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue from the linked Web Editor sketch on iOS or iPadOS, using storeItem and restarting the browser. Then trace how the sketch runs in the preview.p5js.org iframe and where its local storage is associated. Done means stored values persist after a browser restart on iOS and iPadOS without breaking the existing behavior on other platforms.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.