Storage for the web.
You can use JavaScript to determine if your site's storage has been marked as persistent. Calling navigator.storage.persisted()
returns a Promise that resolves with a boolean, indicating whether storage has been marked as persisted.
// Check if site's storage has been marked as persistent
if (navigator.storage && navigator.storage.persist) {
const isPersisted = await navigator.storage.persisted();
console.log(`Persisted storage granted: ${isPersisted}`);
}
The best time to request your storage be marked as persistent is when you save critical user data, and the request should ideally be wrapped in a user gesture. Do not ask for persistent storage on page load, or in other bootstrap code, the browser may prompt the user for permission. If the user isn't doing anything that they think needs to be saved, the prompt may be confusing, and they'll likely reject the request. Additionally, don't prompt too frequently. If the user decided not to grant permission, don't immediately prompt again on the next save.
To request persistent storage for your site's data, call navigator.storage.persist()
. It returns a Promise that resolves with a boolean, indicating whether the persistent storage permission was granted.
// Request persistent storage for site
if (navigator.storage && navigator.storage.persist) {
const isPersisted = await navigator.storage.persist();
console.log(`Persisted storage granted: ${isPersisted}`);
}
The API names to check if your site's storage has already been marked persistent, and to request persistent storage are very similar. The way I remember the difference is persisted()
is past-tense, and is used to check if it's already persisted. Whereas persist()
is present-tense and asks for it now.
Persistent storage is treated as a permission. Browsers use different factors to decide whether to grant persistent storage permissions.
Chrome, and most other Chromium-based browsers automatically handle the permission request, and do not show any prompts to the user. Instead, if a site is considered important, the persistent storage permission is automatically granted, otherwise it is silently denied.
The heuristics to determine if a site is important include:
If the request was denied, it can be requested again later and will be evaluated using the same heuristics.
Firefox delegates the permission request to the user. When persistent storage is requested, it prompts the user with a UI popup asking if they will allow the site to store data in persistent storage.
If the persistent storage permission is granted, the browser will not evict data stored in:
At this time, there is no programmatic way to tell the browser you no longer need persistent storage.
Research from the Chrome team shows that although possible, stored data is rarely cleared automatically by Chrome. To protect critical data that may not be stored in the cloud, or will result in significant data loss, persistent storage can be a helpful tool to ensure that your data is not removed by the browser when the local device is faced with storage pressure. And remember, only request persistent storage when the user is most likely to want it.
Special thanks to Victor Costan, and Joe Medley for reviewing this article. Thanks to Chris Wilson who wrote the original version of this article that first appeared on WebFundamentals.
Hero image by Umberto on Unsplash