How we store data on client (browser). Improve performance, reliability and user experience.
Modern storage makes it possible to store more just small chunks of data on the user’s device. We can persist data for long-term storage, save sites or documents for offline use, retain user-specific settings for your site, and more. This article explains the very basics of how these work.
Caching and storage can improve performance, reliability and user experience (UX).
Even if you’re want to store a large amount of data on the client, don’t worry about it. Unless you’re trying to store several gigabytes of data, modern browsers won’t even bat an eye. But you need to know the limitations of each browser.
Storage is not just about files and assets, but can include other types of data. You can manage all device storage with the Storage Manager API on supported platforms.
Types of Browser Storage
Cookies
Cookies are very tiny data stored in your browser, that can save up to 4 KB and it’s the only storage that sent with every HTTP request by the browser from that domain. Cookies are mainly used for session management.
Websites typically use cookies to ensure that users are recognized when they move between pages, so they don’t get asked to log in again every time. Websites also use cookies to remember information users have entered. For example, e-commerce sites use cookies to remember the items placed in a shopping cart.
NOTE: Cookies should never be used for data storage. But they are a great way to share the client state with the server, and are mostly used for Cookie-based authentication.
There are 2 ways to create cookies: JavaScript and Web server.
Cookies have scope: Domain and Path
And there are two types of cookies:
- Session cookies — They are deleted when the client shuts down. Web browsers may use session restoring, which makes most session cookies permanent, as if the browser was never closed.
- Permanent cookies — Instead of expiring when the client closes, permanent cookies expire at a specific date (Expires) or after a specific time period (Max-Age).
Check out Learn how HTTP Cookies work or HTTP Cookies Crash Course, and How cookies can track you
Web Storage API
Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. It is less useful for storing larger amounts of structured data.
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
LocalStorage as it’s called it’s local storage for your browsers, it can save up to 10MB. Client side reading only.
As developers, we should avoid using localStorage because it’s synchronous and cause performance issues. Also we should not store any security or sensitive data in it.
Sensitive data includes: User IDs, Session IDs, JWTs, Personal information, Credit card information, API keys.
Read more: Please Stop Using Local Storage
SessionStorage does the same, but as it’s name saying, it’s session based and will be deleted after closing your browser, also can save less than LocalStorage, like up to 5MB. Client side reading only. Also we should not store security data in it.
More about The Web Storage API: local storage and session storage
Web SQL Database
Oh, forget about this.
The Web SQL database specification has been deprecated since November 2010.
Read more: Web SQL Database
IndexedDB
IndexedDB is a non-relational database. It is good for storing all kinds of data, like: JS objects, files, blobs, etc. It works asynchronously through transactions and is based on events.
Use IndexedDB to store structured data. This includes data that needs to be searchable or combinable in a NoSQL-like manner, or other data such as user-specific data that doesn’t necessarily match a URL request. Note that IndexedDB isn’t designed for full-text search.
More about How we use IndexedDB, Dive into IndexedDB, IndexedDB — PWA or Simple Introduction to IndexedDB.
Cache Storage API
CacheStorage API is a powerful tool. We can cache our static app resources, like HTML, CSS, and JavaScript. It allows us to ensure that they are always instantly available.
You can use the Cache Storage API to download, store, delete or update assets on the device. Then these assets can be served on the device without needing a network request.
Use the Cache Storage API for network resources, things you’d access by requesting them via a URL, such as HTML, CSS, JavaScript, images, videos, and audio.
More about Caching in PWA
Summary
IndexedDB and CacheStorage 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.
By using CacheStorage API and IndexedDB lets you effectively store all the resources that your app needs to run.
For offline storage, use the Cache API.
For storing application state and user-generated content, use IndexedDB.
BUT if you want to create pages with a shareable state (page that you want to share with other) such as a search page, use the URL’s query string to store this information.
