ios safari local storage limit

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Storage quotas and eviction criteria

Web developers can use a number of technologies to store data in the user's browser (i.e., on the local disk of the device the user is using to view the website).

The amount of data browsers allow websites to store and the mechanisms they use to delete data when that limit is reached differs between browsers.

This article describes the web technologies that can be used to store data, the quotas that browsers have in place to limit websites from storing too much data, and the mechanisms they use to delete data when needed.

How do browsers separate data from different websites?

Browsers store the data from websites in different places, also called buckets, to reduce the risk of users being tracked across the web. In most cases, browsers manage stored data per origin .

The term origin is therefore important to understand this article. An origin is defined by a scheme (such as HTTPS), a hostname, and a port. For example, https://example.com and https://example.com/app/index.html belong to the same origin because they have the same scheme ( https ), hostname ( example.com ), and default port.

The quotas and eviction criteria described in this article apply to an entire origin, even if this origin is used to run several websites, such as https://example.com/site1/ and https://example.com/site2/ .

In some cases, however, browsers can decide to further separate the data stored by an origin in different partitions, for example in cases where an origin is loaded within an <iframe> element in multiple different third-party origins. However, for simplicity reasons, this article assumes that data is always stored per origin.

What technologies store data in the browser?

Web developers can use the following web technologies to store data in the browser:

Note that, in addition to the above, browsers will store other types of data in the browser for an origin, such as WebAssembly code caching.

Does browser-stored data persist?

Data for an origin can be stored in two ways in a browser, persistent and best-effort :

• Best-effort: this is the way that data is stored by default. Best-effort data persists as long as the origin is below its quota, the device has enough storage space, and the user doesn't choose to delete the data via their browser's settings.
• Persistent: an origin can opt-in to store its data in a persistent way. Data stored this way is only evicted, or deleted, if the user chooses to, by using their browser's settings. To learn more, see When is data evicted .

The data stored in the browser by an origin is best-effort by default. When using web technologies such as IndexedDB or Cache, the data is stored transparently without asking for the user's permission. Similarly, when the browser needs to evict best-effort data, it does so without interrupting the user.

If, for any reason, developers need persistent storage (e.g., when building a web app that relies on critical data that isn't persisted anywhere else), they can do so by using the navigator.storage.persist() method of the Storage API .

In Firefox, when a site chooses to use persistent storage, the user is notified with a UI popup that their permission is requested.

Safari and most Chromium-based browsers, such as Chrome or Edge, automatically approve or deny the request based on the user's history of interaction with the site and do not show any prompts to the user.

Note that research from the Chrome team shows that data is very rarely deleted by the browser. If a user visits a website regularly, there is very little chance that its stored data, even in best-effort mode, will get evicted by the browser.

Private browsing

Note that in private browsing mode (also called Incognito in Chrome, and InPrivate in Edge), browsers may apply different quotas, and stored data is usually deleted when the private browsing mode ends.

How much data can be stored?

Different browsers have different rules around how many cookies are allowed per origin and how much space these cookies can use on the disk. While cookies are useful for preserving some small shared state between the browser and the web server across page navigation, using cookies for storing data in the browser is not advised. Cookies are sent with each and every HTTP request, so storing data in cookies that could be stored by using another web technology unnecessarily increases the size of requests.

Because cookies should not be used for storing data in the browser, cookie storage browser limits are not covered here.

Web Storage

Web Storage, which can be accessed by using the localStorage and sessionStorage properties of the window object, is limited to 10 MiB of data maximum on all browsers.

Browsers can store up to 5 MiB of local storage, and 5 MiB of session storage per origin.

Once this limit is reached, browsers throw a QuotaExceededError exception which should be handled by using a try...catch block.

Other web technologies

The data that's stored by using other web technologies, such as IndexedDB, Cache API, or File System API (which defines the Origin Private File System), is managed by a storage management system that's specific to each browser.

This system regulates all of the data that an origin stores using these APIs.

Each browser determines, using whatever mechanism it chooses, the maximum amount of storage a given origin can use.

In Firefox, the maximum storage space an origin can use in best-effort mode is whichever is the smaller of:

• 10% of the total disk size where the profile of the user is stored.
• Or 10 GiB, which is the group limit that Firefox applies to all origins that are part of the same eTLD+1 domain .

Origins for which persistent storage has been granted can store up to 50% of the total disk size, capped at 8 TiB, and are not subject to the eTLD+1 group limit.

For example, if the device has a 500 GiB hard drive, Firefox will allow an origin to store up to:

• In best-effort mode: 10 GiB of data, which is the eTLD+1 group limit.
• In persistent mode: 250 GiB, which is 50% of the total disk size.

Note that it might not actually be possible for the origin to reach its quota because it is calculated based on the hard drive total size, not the currently available disk space. This is done for security reasons, to avoid fingerprinting .

Chrome and Chromium-based browsers

In browsers based on the Chromium open-source project , including Chrome and Edge, an origin can store up to 60% of the total disk size in both persistent and best-effort modes.

For example, if the device has a 1 TiB hard drive, the browser will allow an origin to use up to 600 GiB.

Like with Firefox, because this quota is calculated based on the hard drive total size to avoid fingerprinting, an origin might not actually be able to reach its quota.

Starting with macOS 14 and iOS 17, Safari allots up to around 20% of the total disk space for each origin. If the user has saved it as a web app on the Home Screen or the Dock, this limit is increased to up to 60% of the disk size. For privacy reasons, cross-origin frames have a separate quota, amounting to roughly 1/10 of their parents.

For instance, a macOS device with a 1 TiB drive will limit each origin to around 200 GiB. If the user stores a web app on its Dock, that will be alloted a greater limit of around 600 GiB.

Like other browsers, the exact limits enforced by the quota may vary as to avoid fingerprinting. Additionally, Safari also enforces an overall quota that stored data across all origins cannot grow beyond: 80% of disk size for each browser and web app, and 15% of disk size for each non-browser app that displays web content. More info on Safari's storage policies can be found on the Webkit blog .

In earlier versions of Safari, an origin is given an initial 1 GiB quota. Once the origin reaches this limit, Safari asks the user for permission to let the origin store more data. This happens whether the origin stores data in best-effort mode or persistent mode.

How to check the available space?

Web developers can check how much space is available for their origin and how much is being used by the origin with the navigator.storage.estimate() method of the Storage API .

Note that this method only returns the estimated usage value, not the actual value. Some of the resources that are stored by an origin may be coming from other origins and browsers voluntarily pad the size of the cross-origin data when reporting total usage value.

What happens when an origin fills its quota?

Attempting to store more than an origin's quota using IndexedDB, Cache, or OPFS, for example, fails with a QuotaExceededError exception.

Web developers should wrap JavaScript that writes to browser storage within try...catch blocks. Freeing up space by deleting data before storing new data is also recommended.

When is data evicted?

Data eviction is the process by which a browser deletes an origin's stored data.

Data eviction can happen in multiple cases:

• When the device is running low on storage space, also known as storage pressure .
• When all of the data stored in the browser (across all origins) exceeds the total amount of space the browser is willing to use on the device.
• Proactively, for origins that aren't used regularly, which happens only in Safari.

Storage pressure eviction

When a device is running low on storage space, also known as storage pressure , there may come a point when the browser has less available space than it needs to store all of the origin's stored data.

Browsers use a Least Recently Used (LRU) policy to deal with this scenario. The data from the least recently used origin is deleted. If storage pressure continues, the browser moves on to the second least recently used origin, and so on, until the problem is resolved.

This eviction mechanism only applies to origins that are not persistent and skips over origins that have been granted data persistence by using navigator.storage.persist() .

Browser maximum storage exceeded eviction

Some browsers define a maximum storage space that they can use on the device's hard disk. For example, Chrome currently uses at most 80% of the total disk size.

This maximum storage size means that there may come a point at which the data stored by all of the combined origins exceeds the maximum size without any one origin being above its individual quota.

When this happens, the browser starts evicting best-effort origins as described in Storage pressure eviction .

Proactive eviction

Safari proactively evicts data when cross-site tracking prevention is turned on. If an origin has no user interaction, such as click or tap, in the last seven days of browser use, its data created from script will be deleted. Cookies set by server are exempt from this eviction.

How is data evicted?

When an origin's data is evicted by the browser, all of its data, not parts of it, is deleted at the same time. If the origin had stored data by using IndexedDB and the Cache API for example, then both types of data are deleted.

Only deleting some of the origin's data could cause inconsistency problems.

• Storage for the web on web.dev
• Persistent storage on web.dev
• Chrome Web Storage and Quota Concepts

IOS16 Browser: LocalStorage is cleared after writing data of more than ~2.5MB

IOS16 Safari: LocalStorage is cleared after writing data of more than ~2.5MB.

After upgrading to IOS 16 we faced the problem of clearing data in localStorage.When we try to write data that size is more than ~2.5MB or all amounts of data more than ~2.5MB the LocalStorage is being cleared without any errors and warnings in Safari. I could not reproduce the problem in other browsers or platforms.

Step to reproduce:

• Go to IOS 16 Safari
• Open any website
• try to write data more than ~2.5MB (the attached defineMaxSizeLs.js test script helps you to display the problem)
• check your localStorage

Actual result: your localStorage is empty

Expected result: your localStorage should be filled your data or it should be thrown an exception if the quota is exceeded

Please consider the problem ASAP.

Thank you in advance!

• BlockStorageDeviceDriverKit

the bug will be fixed with https://bugs.webkit.org/show_bug.cgi?id=245479 .

This is an issue on desktop Safari 16 too.

How to use iOS Safari localStorage and sessionStorage in Private Mode

In short, you can't, but you can set a cookie via JavaScript ;) Safari on iOS supports localStorage, but in Private Mode it simply throws an error when you try to save anything to it, which is not great. Also it breaks the behaviour of your app on iPhones and iPads. Long story short: You can't use it, but you'll not know until it's too late.

So the error message Safari throws when you attempt to save anything to localStorage is the following:

Sessionstorage on Safari in private mode will not help us either, because the data saved to it will not persist through a page switch. Common use cases for saving in localStorage could be user preferences that affect your JavaScript UI when you're using Vue.js, React, Angular or when you implement an age gate somewhere on your site.

I believe I only ran into this because I used localStorage directly instead of using some kind of wrapper around it, which you easily can do with Persist.js which supports the following stores:

• flash: Flash 8 persistent storage.
• gears: Google Gears-based persistent storage.
• localstorage: HTML5 draft storage.
• globalstorage: HTML5 draft storage (old spec).
• ie: Internet Explorer userdata behaviors.
• cookie: Cookie-based persistent storage.

That sounds pretty great!

If you for any reason want to roll your own cool thing or you literally only need to save a string or two in case of private Safari on iOS and keep the more complex stores to sane browsers (I'm not kidding, Firefox, Chrome and even edge get this) you can just write a fallback.

A common practise is to save a JavaScript object to localStorage and to read it on page load like so:

Let's imagine we want to save the awesome status:

Now on the next page load, we would love to know the value of awesome . One could be tempted to simply do this:

Don't! It will just give you the following error message if

• the user has never even seen your site (first page load ever)
• the user uses Safari in private mode
• the user uses a devices that has 0kb free space (can't write without space)
• the user has cleared their cache

Instead, if you don't want this to crash your app, always try/catch JSON.parse , always:

Setting a Fallback Cookie with JavaScript

Since I'm a lazy person and I don't enjoy writing a ton of stuff for weird old implementations of things, I recommend you have a look at Cookies.js for all your cookie saving and reading needs. Also interesting is the Mozilla page and their simple cookie framework .

The framework is really simple to use and I suggest you use it after a test if localStorage saving works fails:

That's it! Let me know if you've experienced other fun issues with Safari ;)

Thank you for reading! If you have any comments, additions or questions, please tweet or toot them at me!

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Storage for the web

There are many different options for storing data in the browser. Which one is best for your needs?

Internet connections can be flakey or non-existent on the go, which is why offline support and reliable performance are common features in progressive web apps . Even in perfect wireless environments, judicious use of caching and other storage techniques can substantially improve the user experience. There are several ways to cache your static application resources (HTML, JavaScript, CSS, images, etc.), and data (user data, news articles, etc.). But which is the best solution? How much can you store? How do you prevent it from being evicted?

What should I use?

Here's a general recommendation for storing resources:

• For the network resources necessary to load your app and file-based content, use the Cache Storage API (part of service workers ).
• For other data, use IndexedDB (with a promises wrapper ).

IndexedDB and the Cache Storage API are supported in every modern browser. They're both asynchronous, and will not block the main thread. They're accessible from the window object, web workers, and service workers, making it easy to use them anywhere in your code.

What about other storage mechanisms?

There are several other storage mechanisms available in the browser, but they have limited use and may cause significant performance issues.

SessionStorage is tab specific, and scoped to the lifetime of the tab. It may be useful for storing small amounts of session specific information, for example an IndexedDB key. It should be used with caution because it is synchronous and will block the main thread. It is limited to about 5MB and can contain only strings. Because it is tab specific, it is not accessible from web workers or service workers.

LocalStorage should be avoided because it is synchronous and will block the main thread. It is limited to about 5MB and can contain only strings. LocalStorage is not accessible from web workers or service workers.

Cookies have their uses, but should not be used for storage. Cookies are sent with every HTTP request, so storing anything more than a small amount of data will significantly increase the size of every web request. They are synchronous, and are not accessible from web workers. Like LocalStorage and SessionStorage, cookies are limited to only strings.

The File System API and FileWriter API provide methods for reading and writing files to a sandboxed file system. While it is asynchronous, it is not recommended because it is only available in Chromium-based browsers .

The File System Access API was designed to make it easy for users to read and edit files on their local file system. The user must grant permission before a page can read or write to any local file, and permissions are not persisted across sessions.

WebSQL should not be used, and existing usage should be migrated to IndexedDB. Support has been removed from almost all major browsers. The W3C stopped maintaining the Web SQL spec in 2010, with no plans to further updates planned.

Application Cache should not be used, and existing usage should be migrated to service workers and the Cache API. It has been deprecated and support will be removed from browsers in the future.

How much can I store?

In short, a lot , at least a couple of hundred megabytes, and potentially hundreds of gigabytes or more. Browser implementations vary, but the amount of storage available is usually based on the amount of storage available on the device.

• In incognito mode, Chrome reduces the amount of storage an origin can use to approximately 5% of the total disk space.
• If the user has enabled "Clear cookies and site data when you close all windows" in Chrome, the storage quota is significantly reduced to a maximum of approximately 300MB.
• See PR #3896 for details about Chrome's implementation.
• Internet Explorer 10 and later can store up to 250MB and will prompt the user when more than 10MB has been used.
• Firefox allows the browser to use up to 50% of free disk space. An eTLD+1 group (e.g., example.com , www.example.com and foo.bar.example.com ) may use up to 2GB . You can use the StorageManager API to determine how much space is still available.
• If a PWA is added to the home screen on mobile Safari, it appears to create a new storage container, and nothing is shared between the PWA and mobile Safari. Once the quota has been hit for an installed PWA, there doesn't appear to be any way to request additional storage.

In the past, if a site exceeded a certain threshold of data stored, the browser would prompt the user to grant permission to use more data. For example, if the origin used more than 50MB, the browser would prompt the user to allow it to store up to 100MB, then ask again at 50MB increments.

Today, most modern browsers will not prompt the user, and will allow a site to use up to its allotted quota. The exception appears to be Safari, which prompts when the storage quota is exceeded, requesting permission to increase the allocated quota. If an origin attempts to use more than its allotted quota, further attempts to write data will fail.

How can I check how much storage is available?

In many browsers , you can use the StorageManager API to determine the amount of storage available to the origin, and how much storage it's using. It reports the total number of bytes used by IndexedDB and the Cache API, and makes it possible to calculate the approximate remaining storage space available.

The StorageManager isn't implemented in all browsers yet, so you must feature detect it before using it. Even when it is available, you must still catch over-quota errors (see below). In some cases, it's possible for the available quota to exceed the actual amount of storage available.

During development, you can use your browser's DevTools to inspect the different storage types, and easily clear all stored data.

A new feature was added in Chrome 88 that lets you override the site's storage quota in the Storage Pane. This feature gives you the ability to simulate different devices and test the behavior of your apps in low disk availability scenarios. Go to Application then Storage , enable the Simulate custom storage quota checkbox, and enter any valid number to simulate the storage quota.

While working on this article, I wrote a simple tool to attempt to quickly use as much storage as possible. It's a quick and easy way to experiment with different storage mechanisms, and see what happens when you use all of your quota.

How to handle going over quota?

What should you do when you go over quota? Most importantly, you should always catch and handle write errors, whether it's a QuotaExceededError or something else. Then, depending on your app design, decide how to handle it. For example delete content that hasn't been accessed in a long time, remove data based on size, or provide a way for users to choose what they want to delete.

Both IndexedDB and the Cache API both throw a DOMError named QuotaExceededError when you've exceeded the quota available.

If the origin has exceeded its quota, attempts to write to IndexedDB will fail. The transaction's onabort() handler will be called, passing an event. The event will include a DOMException in the error property. Checking the error name will return QuotaExceededError .

If the origin has exceeded its quota, attempts to write to the Cache API will reject with a QuotaExceededError DOMException .

How does eviction work?

Web storage is categorized into two buckets, "Best Effort" and "Persistent". Best effort means the storage can be cleared by the browser without interrupting the user, but is less durable for long-term or critical data. Persistent storage is not automatically cleared when storage is low. The user needs to manually clear this storage (via browser settings).

By default, a site's data (including IndexedDB, Cache API, etc) falls into the best effort category, which means unless a site has requested persistent storage , the browser may evict site data at its discretion, for example, when device storage is low.

The eviction policy for best effort is:

• Chromium-based browsers will begin to evict data when the browser runs out of space, clearing all site data from the least recently used origin first, then the next, until the browser is no longer over the limit.
• Internet Explorer 10+ will not evict data, but will prevent the origin from writing any more.
• Firefox will begin to evict data when the available disk space is filled up, clearing all site data from the least recently used origin first, then the next, until the browser is no longer over the limit.
• Safari previously did not evict data, but recently implemented a new seven-day cap on all writable storage (see below).

Starting in iOS and iPadOS 13.4 and Safari 13.1 on macOS, there is a seven-day cap on all script writable storage, including IndexedDB, service worker registration, and the Cache API. This means Safari will evict all content from the cache after seven days of Safari use if the user does not interact with the site. This eviction policy does not apply to installed PWAs that have been added to the home screen. See Full Third-Party Cookie Blocking and More on the WebKit blog for complete details.

Bonus: Why use a wrapper for IndexedDB

IndexedDB is a low level API that requires significant setup before use, which can be particularly painful for storing simple data. Unlike most modern promise-based APIs, it is event based. Promise wrappers like idb for IndexedDB hide some of the powerful features but more importantly, hide the complex machinery (e.g. transactions, schema versioning) that comes with the IndexedDB library.

Gone are the days of limited storage and prompting the user to store more and more data. Sites can store effectively all of the resources and data they need to run. Using the StorageManager API you can determine how much is available to you, and how much you've used. And with persistent storage , unless the user removes it, you can protect it from eviction.

Additional resources

• IndexedDB Best Practices
• Chrome Web Storage and Quota Concepts

Special thanks to Jarryd Goodman, Phil Walton, Eiji Kitamura, Daniel Murphy, Darwin Huang, Josh Bell, Marijn Kruisselbrink, and Victor Costan for reviewing this article. Thanks to Eiji Kitamura, Addy Osmani, and Marc Cohen who wrote the original articles that this is based on. Eiji wrote a helpful tool called Browser Storage Abuser that was useful in validating current behavior. It allows you to store as much data as possible and see the storage limits on your browser. Thanks to Francois Beaufort who did the digging into Safari to figure out its storage limits.

The hero image is by Guillaume Bolduc on Unsplash .

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2020-04-27 UTC.

HTML5 Local Storage Revisited

Share this article

Available disk space

Native cache vs local storage, things have changed.

• Who’s using local storage?

A note on Private Browsing

Frequently asked questions (faqs) about html5 local storage.

Local storage is part of the HTML5 Web Storage API and it allows you to store data in the browser. Unlike cookies, data stored using local storage isn’t sent back to the server. All data stays on the client, and you can currently store from 2MB to 10MB. This limit is tied to the specific browser, protocol (HTTP or HTTPS), port, and top level domain in use.

In this article, we’ll discuss how to use this API to improve the performance of a website. I’ll assume that you know what local storage is and the methods exposed, but if you need a refresher I suggest you read the article An Overview of the Web Storage API by Colin Ihrig.

Before we start the discussion of local storage, I want to give you an overview of the available disk space in major mobile and desktop browsers. The following tables are based on the article “Working with quota on mobile browsers” .

Mobile browsers:

Desktop browsers:.

When using local storage, your data will stay on the client and persist across sessions and device restarts. As I mentioned in the introduction, the limit of the local storage API is tied to the specific browser (as shown in the previous tables), protocol, port, and top level domain in use. By contrast, the space available on the browser’s native cache is shared across websites, and it’s much smaller on mobile devices. It gets flushed frequently, sometimes even within the same visit. Mobile devices have an additional issue: they’re less powerful than desktop devices, so achieving good performance is a must.

There has been a lot of discussion about local storage performance. For example, Christian Heilmann, formerly with Mozilla, wrote “There is no simple solution for local storage” . Local storage can have a performance hit if not used carefully. The first thing you need to take into account is that it’s a synchronous API, therefore it blocks the main UI thread. Local storage writes and reads data from the hard drive, which can be a much more expensive operation than reading from memory. In order to give you access to the data, local storage needs to read the data from the disk, and that’s where the performance hit occurs. This performance hit is not a major issue with small amounts of data, but it can be noticeable using the full storage limit.

As a good practice you should try to perform as few reads as possible. Also, because we are dealing with a synchronous API, you should try to read data from local storage only after the window.onload event has fired, to avoid blocking the UI thread.

But things are getting better. An article published by Peter McLachlan of Mobify explained that local storage can be 5x faster than native cache on mobile devices .

In the appendix of the same article you can see the evolution of the performance of local storage on mobile browsers and how much it’s improved. You can also see that local storage has always been faster than native cache.

Who’s using local storage?

There are some recent cases of websites using local storage to cache assets, such as The Guardian who are using local storage for critical path CSS. You can view this presentation given at Velocity conference 2014 to understand more about how they are able to do this.

Also Smashing Magazine recently started caching web fonts in local storage. In this article about some performance improvements implemented recently on their website, they report deferring web fonts and caching them in local storage among the changes that led to the most effective improvements.

As reported on caniuse.com , under the tab known issues, when running in private or incognito mode, Safari, iOS Safari, and Android browsers don’t support setting items in local storage.

Other browsers such as Chrome and Firefox allow you to store data in local storage under private mode, but the data is purged when you exit private mode. This is due to privacy issues, as someone might use the persistent data to learn about the user’s actions when in private mode.

This issue may break your application’s behavior if a value set under a previous session is expected to be there at a subsequent visit. So, in order to use local storage safely, it’s a good practice not only to test for support, but also to test for the capacity to get and set items.

For more info on local storage behavior under private mode and on how to check local storage content in different browsers, you can use the article “Don’t Forget To Check Private Browsing Mode When Testing” as a reference.

Maybe it’s time that we start revisiting local storage and its potential usage, especially on mobile devices where we can use it to avoid latency bottlenecks. We can start thinking about new ways to cache our assets, and then serve them instantly to our users. We’ve seen there are already some successful implementations of local storage usage in unconventional ways.

What is the maximum storage limit for HTML5 Local Storage?

The maximum storage limit for HTML5 Local Storage varies across different browsers. However, most modern browsers offer around 5MB of storage per domain. This is significantly larger than the 4KB (approximately 4096 bytes) offered by cookies. It’s important to note that this storage is per domain, not per individual local storage object.

How secure is HTML5 Local Storage?

HTML5 Local Storage is not designed to store sensitive data. Unlike HTTP cookies, data stored in local storage is not sent back to the server with every HTTP request. This means it’s less vulnerable to certain types of attacks, such as cross-site scripting (XSS). However, it’s still susceptible to other types of attacks, such as cross-site scripting (XSS) and cross-site request forgery (CSRF). Therefore, it’s recommended not to store sensitive information like passwords or credit card numbers in local storage.

How can I check if a browser supports HTML5 Local Storage?

You can check if a browser supports HTML5 Local Storage by using the ‘in’ operator in JavaScript. Here’s a simple code snippet that checks for local storage support: if ('localStorage' in window && window['localStorage'] !== null) { // Local storage is supported } else { // Local storage is not supported }

How can I clear data from HTML5 Local Storage?

You can clear data from HTML5 Local Storage using the clear() method. This method removes all key-value pairs from the local storage for the current domain. Here’s a simple code snippet: localStorage.clear();

Can I store objects or arrays in HTML5 Local Storage?

Yes, you can store objects or arrays in HTML5 Local Storage. However, local storage only supports string key-value pairs. Therefore, you need to convert your object or array into a string using JSON.stringify() before storing it, and convert it back into an object or array using JSON.parse() when retrieving it.

What is the difference between Local Storage and Session Storage?

The main difference between Local Storage and Session Storage lies in their lifespan and scope. Data in Local Storage persists even when the browser is closed and reopened, while data in Session Storage is cleared when the page session ends, i.e., when the browser is closed.

How can I iterate over all values in Local Storage?

You can iterate over all values in Local Storage using a simple for loop in combination with the localStorage.key() method and the localStorage.getItem() method.

Can Local Storage be shared between subdomains?

No, Local Storage cannot be shared between subdomains. Each subdomain has its own separate local storage.

Can Local Storage data be transferred between different browsers?

No, Local Storage data cannot be transferred between different browsers. Each browser has its own separate local storage.

How can I handle Local Storage quota exceeded errors?

When the Local Storage quota is exceeded, a QUOTA_EXCEEDED_ERR exception is thrown. You can handle this exception by catching it in a try-catch block and taking appropriate action, such as clearing some space or notifying the user.

Luis is a frontend developer with a mix of usability and human computer interaction skills. He's been working on the web for almost five years in many different projects, such as: enterprise web apps, mobile apps, and e-commerce websites.

TechRepublic

Account information.

Share with Your Friends

How to use Files in iOS 14 to manage Safari downloads, local device storage, and external drives

Your email has been sent

The Files app has grown into a full-fledged document and file management app with the latest iOS releases, iOS 14 and iPadOS 14. You can now easily copy files between multiple file services, download files locally, and even connect up removable storage to copy files to and from.

In this article, we’ll delve into how to manage internet downloads from Safari, configure the local location in the Files app, and copy or move files to and from removable storage from local storage.

SEE: Software as a Service (SaaS): A cheat sheet (free PDF) (TechRepublic)

How to manage your local storage

iOS 14 and iPadOS 14 allow you to easily manage local storage. Local storage is a place where files can be stored locally on the SSD or device without storing it on a file sharing service or iCloud Drive.

Before you can begin storing files locally, you first need to enable the local storage inside of the Files app. To do this, perform these steps:

• Open the Files app on your iOS device.
• Select the “…” button in the sidebar on iPadOS, or in the root of the Browse tab on iOS.
• Select Edit / Edit Sidebar.
• Enable the switch for On My iPhone/iPad ( Figure A ).

Once you’ve done this, a new location will be added to the sidebar called On My iPhone/iPad. Tapping on this location will present you with the contents of the local file system. Folders for apps that have files stored locally will appear. In this location, you can create a new folder by tapping the Folder+ at the top of the screen.

You can easily copy files to this location from iCloud Drive or another service by tapping and dragging from the other service into this local location. The files added here will be stored on the device and if you go offline, they will still be available for manipulation without any need to rely on an internet connection.

This is a great place to store books, PDFs, or other documents that need to be frequently accessed when offline.

How to download files from Safari

Newer versions of Safari, including the one in iOS 13 and 14, can let you easily download files, such as zip files, PDFs, and more. To download a file in Safari, just tap on a download link on a website or tap and hold on a link and then tap Download Linked File ( Figure B ).

If you have an iCloud Drive account, by default, this will cause the files to be downloaded to a Downloads folder contained in your iCloud Drive account. However, you can change this setting so that the files are downloaded locally to your iPhone or iPad.

To change the download location in Safari, perform these steps:

• Open the Settings app.
• Navigate to Safari | Downloads.
• Select On My iPhone/iPad as the location to store downloaded files ( Figure C ).

Once a file is downloaded, it will be available in the Files app at the selected location.

Inside of this Downloads view, you can also choose to clean up and remove downloaded list items. This is not removing the file itself, but rather the list items that appear when tapping the Download button in Safari’s toolbar. We tend to keep this on Upon Successful Download.

How to use removable storage

To use removable storage, you’ll first need to plug in the drive to your iPad or iPhone. To do this, you’ll either need a USB-C or Lightning compatible thumb drive, or use an adapter.

If you’re using an iPad with USB-C, then you can easily use any USB-C hub adapter to connect an external drive; if you’re using an iPad with a Lightning port or iPhone, then get the Apple Camera Connection Kit , and you can easily plug in a thumb drive or external drive. You may have issues with some iPad or iPhone models if you’re connecting an external drive that requires power to operate. Some iPhone and iPad models will only supply limited power over the Lightning port.

Once you’ve plugged in the adapter, then your external drive, open the Files app, and you’ll notice that your drive will automatically appear under the Locations section in the sidebar on iPadOS or the Browse tab in iOS ( Figure D ).

This works just like any other file location and you can easily tap, hold, and drag files to and from this location to your iPad, or vice versa. You can also drag files from cloud storage locations like iCloud Drive onto the external storage location.

Subscribe to the Developer Insider Newsletter

From the hottest programming languages to commentary on the Linux OS, get the developer and open source news and tips you need to know. Delivered Tuesdays and Thursdays

• How to become a software engineer: A cheat sheet
• Zoom vs. Microsoft Teams, Google Meet, Cisco WebEx and Skype: Choosing the right video-conferencing apps for you (free PDF)
• Hiring Kit: Application engineer
• Microsoft 365 (formerly Office 365) for business: Everything you need to know
• Must-read coverage: Programming languages and developer career resources

Create a TechRepublic Account

Get the web's best business technology news, tutorials, reviews, trends, and analysis—in your inbox. Let's start with the basics.

* - indicates required fields

Sign in to TechRepublic

Lost your password? Request a new password

Reset Password

Please enter your email adress. You will receive an email message with instructions on how to reset your password.

Check your email for a password reset link. If you didn't receive an email don't forgot to check your spam folder, otherwise contact support .

Welcome. Tell us a little bit about you.

This will help us provide you with customized content.

Want to receive more TechRepublic news?

You're all set.

Thanks for signing up! Keep an eye out for a confirmation email from our team. To ensure any newsletters you subscribed to hit your inbox, make sure to add [email protected] to your contacts list.

The Web Storage API: local storage and session storage

The Web Storage API provides a way to store data in the browser. It defines two storage mechanisms which are very important: Session Storage and Local Storage, part of the set of storage options available on the Web Platform

Introduction

How to access the storage, setitem(key, value), getitem(key), removeitem(key), going over quota.

The Web Storage API defines two storage mechanisms which are very important: Session Storage and Local Storage .

They are part of the set of storage options available on the Web Platform, which includes:

• The Cache API

Application Cache is deprecated, and Web SQL is not implemented in Firefox, Edge and IE.

Both Session Storage and Local Storage provide a private area for your data. Any data you store cannot be accessed by other websites.

Session Storage maintains the data stored into it for the duration of the page session. If multiple windows or tabs visit the same site, they will have two different Session Storage instances.

When a tab/window is closed, the Session Storage for that particular tab/window is cleared.

Session storage is meant to allow the scenario of handling different processes happening on the same site independently, something not possible with cookies for example, which are shared in all sessions.

Local Storage instead persists the data until it’s explicitly removed, either by you or by the user. It’s never cleaned up automatically, and it’s shared in all the sessions that access a site.

Both Local Storage and Session Storage are protocol specific : data stored when the page is accessed using http is not available when the page is served with https , and vice versa.

Web Storage is only accessible in the browser. It’s not sent to the server like cookies do.

Both Local and Session Storage are available on the window object, so you can access them using sessionStorage and localStorage .

Their set of properties and methods is exactly the same, because they return the same object, a Storage object.

The Storage Object has a single property, length , which is the number of data items stored into it.

setItem() adds an item to the storage. Accepts a string as key, and a string as a value:

If you pass any value that’s not a string, it will be converted to string:

getItem() is the way to retrieve a string value from the storage, by using the key string that was used to store it:

removeItem() removes the item identified by key from the storage, returning nothing (an undefined value):

Every item you store has an index number.

It might appear the number is consecutive, so the first time you use setItem() , that item can be referenced using key(0) , the next with key(1) and so on, but it’s not. MDN says “The order of keys is user-agent defined, so you should not rely on it”.

If you reference a number that does not point to a storage item, it returns null .

clear() removes everything from the storage object you are manipulating:

Storage size limits

Through the Storage API you can store a lot more data than you would be able with cookies.

The amount of storage available on Web might differ by storage type (local or session), browser, and by device type. A research by html5rocks.com points out those limits:

• Chrome, IE, Firefox: 10MB
• Safari: 5MB for local storage, unlimited session storage
• Chrome, Firefox: 10MB
• iOS Safari and WebView: 5MB for local storage, session storage unlimited unless in iOS6 and iOS7 where it’s 5MB
• Android Browser: 2MB local storage, unlimited session storage

You need to handle quota errors, especially if you store lots of data. You can do so with a try/catch:

Developer Tools

The DevTools of the major browsers all offer a nice interface to inspect and manipulate the data stored in the Local and Session Storage.

Here is how can I help you:

• COURSES where I teach everything I know
• THE VALLEY OF CODE your web development manual
• BOOTCAMP 2024 cohort in progress, next edition in 2025
• BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
• SOLO LAB everything I know about running a lifestyle business as a solopreneur
• Interesting links collection
• Follow me on X