Repository navigation
Parent issue: Local storage #4334
Description
p5.js version
No response
What is your operating system?
No response
Web browser and version
No response
Actual Behavior
When sketches crash, work is lost.
Expected Behavior
The intended behavior is that local storage should be saving the sketch before each run. So if there's a crash, re-opening the tab should be fine. Work being lost may indicate a bigger problem with localStorage so we will being to investigate there.
Steps to reproduce
Details in child issues.
Activity
ksen0 commentedon Oct 2, 2026
For research, may be worthwhile to consider "other standard APIs that might be more fit for purpose.
See the MDN docs for File System API, and OPFS more specifically." thanks @SableRaf for the suggestion
clairep94 commentedon Oct 2, 2026
@doradocodes should we close the children to de-dupe?
SableRaf commentedon Oct 3, 2026
I did a bit more research so here are some clarifications.
Note: The research below was done with some AI help. I verified the info with primary sources (mainly MDN, links below). However, this is all based on reading documentation, not experiments or first-hand experience, so take it with a grain of salt.
IndexedDB
IndexedDB is "a low-level API for client-side storage of significant amounts of structured data, including files/blobs", explicitely presented as an alternative to Web Storage API (
localStorageandsessionStorage). It is "Widely available" according to MDN. This might be enough for our use case.Side note: IndexedDB is said to be somewhat awkward do work with. Libraries like Dexie claim to offer more convenient APIs for working with IndexedDB.
OPFS
OPFS (Origin Private File System) is "a storage endpoint provided as part of the File System API, which is private to the origin of the page and not visible to the user like the regular file system". It is a more recent standard than IndexedDB. Nevertheless, MDN lists OPFS as "Widely available."
About persistence
Both IndexedDB and OPFS use best-effort storage by default, so browsers may still evict the data if they need the storage. The Storage API provides
navigator.storage.persist()can be used to request persistent storage. However, if the user clears site data, resets their browser profile, or looses access to the device, the data will still be lost.This is one place where the broader File System Access API could be useful: it can save a project to a user-selected file or directory on the actual local filesystem, so that copy is not tied to the browser's origin storage and can be treated like regular files (possibility of automated cloud backups, sending by email, file transfer services, etc). Browser support is more limited, though, so it would still need a fallback such as a convenient export/import mechanism for unauthenticated users. Note: an approach for sharing sketches as URLs is discussed in #4331 (comment) but it is limited to shorter sketches and does not replace the need for easier export/import.
References