There are four main options for a website's client-side data storage: IndexedDB, Local Storage, Session Storage, and Cookies.
IndexedDB stores
structured data, including serialized JavaScript objects, similar to passing an object through
JSON.stringify(), as key-value pairs in indexes. A database connection must be established, and all operations are done through transactions. The connection is handled asynchronously. As it stands, the API for IndexedDB can be complex for developers, but the library
idb simplifies it. IndexedDB has the largest storage capacity of all storage methods. One interesting use case of IndexedDB is YouTube Premium, which allows downloading videos to the browser; the videos are downloaded as blobs (collections of binary data) and are read from the database when offline.
Local Storage and Session Storage are both subsets of Web Storage, where key-value pairs are stored and accessed as strings. There is no specification for user-agents defining the size limit of Web Storage; however, Chrome, Firefox, and Safari all allow around 5-10MB for each type. Access to Web Storage is a blocking operation, meaning that a program will stall when getting or setting sufficiently large data. Local Storage persists across sessions, whereas Session Storage is stored and reset when the browser session (web page, 'area' where a JavaScript program runs) is closed. The Web Storage API is quite simple,
[local/session]Storage.getItem(key) and
[local/session]Storage.setItem(key, value). An interesting
piece of history is that Opera (before they pandered to gamers with the
Opera GX browser) only allowed 3MB of Web Storage.
Cookies are plaintext data that are persistent across sessions. Browsers typically support at least 300 cookies total, at least 4096 bytes per cookie, and at least 20 cookies per unique host/domain (
RFC 2109 #6.3). Unlike IndexedDB and Web Storage, Cookies do not have a dedicated API for setting cookie values. The cookie string (a plaintext string) is accessed with document.cookie, which then must be parsed to add, view, or delete cookies. Cookies are persistent but expire after a specified time, typically around 400 days.