Web Storage

tags : Web Development, Database, Javascript, Cookies

FAQ §

What are the other storage options? §

• Something of a standard
  • Cookies
  • Web Storage
• Browser specific implementations
  • IndexedDB : storing large data structures in the browser and indexing
  • CacheAPI: Storing HTTP request and response
  • OPFS(FilesystemAPI) : FS per origin

What if I need to persist data? §

• Browsers will do a best effort thing in storing and evicting data without prompting the user. Whatever storage mechanism it might be.
• But if we want to explicitly persist things we can use the StorageAPI using something like navigator.storage.persist()
• What’s the max limit of data can be stored (best effort or persisted) depends on browser. Check this for more details. Basically does some calculation based on total disk size etc. But goes into GBs so, nothing to worry for even for mid sized applications.

What are some useful StorageAPI functions? §

• navigator.storage.estimate() : Tells you remaining space
• navigator.storage.persist()

StorageAPI? §

• It’s a cool thing.
• A storage API that allows us to use IndexedDB, CacheAPI, Web Storage(session and local) API from the same interface.
• single bucket for each origin. iframe embeds will have separate buckets.
• Different bucket modes are : “best-effort” & “persistent”

WebStorageAPI? §

Store what? §

• K/V store
• Can be accessed using Window.localStorage and Window.sessionStorage both of which share the StorageAPI

Categories §

Session storage §

• Per origin, Per session
• Size Limit: 5MB
• Session: Till the browser tab is close. Page refresh data is persisted.

Local storage §

• Per origin, persisted(remove explicitly)
• Size Limit: 5MiB but configurable
• In private mode, localStorage is treated like sessionStorage

Implementation §

• Window implements WindowLocalStorage, WindowSessionStorage
• Window.localStorage and Window.sessionStorage properties
• Different Storage object is used for sessionStorage and localStorage for each origin

Other browser storage things §

IndexedDB §

• Slow IndexedDB | RxDB - JavaScript Database (IndexDB be slow)
• LocalStorage is string only
• IndexedDB allows more than just strings unlike localStorage.
• Also accessible to web workers
• Wrapper (If we need to use, better use wrappers)
  • https://github.com/jakearchibald/idb-keyval
  • https://github.com/fagbokforlaget/simple-fs

FileSystemAPI §

Need to explore

• The File System Access API: simplifying access to local files - Chrome for Developers
• FileSystem - Web APIs | MDN
• File System API - Web APIs | MDN

OPFS §

• Gives random access to files, private to the origin of the page.