The Future of Web Storage: Exploring Advanced Storage APIs

Rate this content
Bookmark
Slides

Are you tired of relying on outdated web storage techniques? Join us as we explore the latest advancements in web storage and data management that will supercharge your web applications! In this presentation, we will dive into the world of advanced APIs such as IndexedDB, CacheStorage, FileSystem API, and more. We'll compare the benefits and limitations of each API, discussing their persistence, quota, security, and performance. We'll also explore real-world use cases and discuss web storage beyond local-storage and session-storage

Shubham Gautam
Shubham Gautam
9 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk explores three powerful web APIs: indexedDB, cache storage, and the filesystem API. IndexedDB enables offline functionality and provides advanced features like coding & indexing, transactions, versioning, and security. Cache storage supports various caching strategies and namespaces, while the File System API allows fine-grained control over files, facilitating file uploads and downloads. A code example of interacting with the File System API is also provided.

Available in Español

1. Introduction to indexedDB and cache storage

Short description:

Today we are going to explore three powerful web APIs: indexedDB, cache storage, and the filesystem API. IndexedDB is a client-side database that enables web apps to function offline and provides advanced features like coding & indexing, transactions, versioning, and security. Cache storage is a browser feature that allows web apps to store and manage cache resources.

Hey everyone, I'm Shubham and I'm currently a software engineer at Headon. Today we are going to explore three powerful web APIs that are fundamental in modern web development. First is indexedDB, then we have cache storage, and then the filesystem API. In a world where user expectations are higher than ever, these APIs address critical aspects of web development such as data persistence, offline capabilities, performance optimization, and seamless user experiences. So without further ado, let's dive in.

Okay, let's start by diving deeper into indexedDB, which is a powerful client-side database for web apps. If we have to define indexedDB, it is short for indexed database and it is a low-level, no-SQL database API that allows websites to store large amounts of structured data on the client-side. Unlike cookies and local storage, it is designed for storing a more significant amount of data efficiently. Talking about its role in web development, indexedDB plays a crucial role in modern web development by providing a robust and scalable solution directly in the browser. One of its primary roles is to empower web applications to function seamlessly in offline mode. IndexedDB ensures that users can access and interact with their data even when an internet connection is unavailable.

Talking about the advanced features of IndexedDB, first is Coding & Indexing. IndexedDB excels in coding and indexing data efficiently. You can create indexes on specific properties of objects stored in the database. This allows for a rapid data retrieval based on the indexed attributes. For example, if you have a database of customers, you can create an index on the email property, which will help in enabling quick lookups by using the email addresses. Now talking about Transactions, transactions in IndexedDB ensure data integrity. All the operations within a transaction are atomic, which means that either all operations succeed or all operations fail. This helps in maintaining a consistent application state. Now let's talk about Versioning. IndexedDB supports database versioning. When we make changes to our database structure, we can increment the version number. This allows us to handle database schema upgrades seamlessly. Now talking about security and privacy, IndexedDB operates in a secure sandbox environment, which helps in safeguarding user data from potential security risks. It isolates data storage to the origin, which helps in ensuring that data is protected and accessible by unauthorized parties. Now let's see how we can establish a connection with IndexedDB. In this example, we are opening a connection with a customer database and the version of the database is 1. In this example, we also have an On Success callback and also an On Error callback.

Now let's move on to Cache storage. If we have to define cache storage, it is basically a browser feature that allows web applications to store and manage cache resources such as HTML, CSS, JavaScript, Image Assets and other assets.

2. Cache Storage and File System API

Short description:

Cache storage enables various caching strategies, including cache first and network first. It also supports cache namespaces for organizing resources. Pre-caching ensures offline functionality from the first load. Dynamic caching and background sync are valuable for adapting to user actions and real-time data updates. The File System API allows fine-grained control over individual files and is useful for interacting with user files and managing local files on the client side.

It is basically designed to improve website performance and ensure a seamless user experience, particularly in unreliable network conditions. Talking about its advanced features, the first is caching strategy. Cache storage enables the implementation of various caching strategies. The choice of strategies depends on the application's requirements. Some of the common strategies include cache first where we retrieve assets from the cache first and fall back to the network if needed. Another one is network first where the application tries the network first and uses the cache as a fallback.

Then we have cache namespaces. Cache storage basically allows us to create multiple caches with different names for organizing resources. This can be extremely useful for versioning or grouping assets. For example, you can have one cache for static assets like images or their videos and another cache namespace for API responses. Talking about pre-caching, pre-caching is the practice of caching essential assets during the initial installation of the service worker activation. It ensures that our application can run offline effectively from the first load.

Talking about dynamic caching, in addition to pre-caching, cache storage also supports dynamic caching. In dynamic caching, resources are cached based on user interaction and specific events. This flexibility allows our web app to adapt to user actions and the changing content. Talking about background sync, cache storage together with service workers can be used for background synchronization of data. This means that data can be synchronized with the server even when the application is not actively in use or when the internet connection is intermittent. Background sync is invaluable for applications that rely on real-time data updates and for providing users with up-to-date information regardless of their network status.

Now, let's take a good example for cache storage. In this example, we are establishing a connection with the images cache namespace and we are trying to receive images from the cache and if the images are not found in the cache, we retrieve the images from the network, we save it in cache and then return the images. Now, let's move on to File System API.

Okay, this API is essential for working with user files and managing file access within web applications. Unlike Indexed, Db or cache storage, the File System API is primarily designed for file level access, which makes it a strong choice when you need a fine-grained control over individual files. If you have to define File System API, it is a browser feature that allows web applications to create, read, write, and manage files and directories on a client device. File System API fits into web development when you need to interact with user files, such as storing user-generated content or managing local files on the client side.

Now talking about the benefits and use cases, first is file access and management. One of the primary advantages of File System API is its capability to access and manage files on a client device. This is particularly useful for applications that involve user-generated content such as document editors, image editors, video editors, and more. Second, we have File Input Output. The File System API provides powerful input output capabilities.

3. File System API and Code Example

Short description:

The File System API allows reading, writing, creating, and editing files directly from web applications. It also facilitates file uploads and downloads, enabling users to select files for upload and store downloaded files locally. The API operates in a sandbox environment for security, and it is beneficial for gaming and educational applications that require local storage. Let's now examine a code example of interacting with the File System API.

You can read and write data to files, you can create files, edit files, and you can do all this directly from your web application. Now talking about File Uploads and Downloads, File System API facilitates file uploads and downloads. Users can select files from their local device for upload, and apps can store downloaded files locally on their user devices.

Now talking about security considerations, similar to IndexedDB, the File System API operates in a sandbox environment to protect user data and ensure that malicious scripts cannot access sensitive files.

Now talking about gaming and interactive content, the File System API can be vital for web-based gaming applications. It allows games to save progress, user profiles, and game assets locally, which helps in ensuring a smoother gaming experience even in offline or low-connectivity scenarios. If we talk about educational and interactive applications that involve storing progress, quizzes or interactive content, using File System API, we can provide a reliable and engaging user experience.

Now let's look at a code example where we are interacting with the File System API. In this example, we are opening a temporary connection with the File System API, and we have specified a maximum limit of 5 MBs. And in this example, we are trying to access the example.txt file, and we are using a file reader to access the contents of the file. So let's move on, I guess time is limited. Okay, that's it. Thank you everyone for tuning in and being a part of this session. Your interest and support are greatly appreciated. Here's how we can connect.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Get rid of your API schemas with tRPC
React Day Berlin 2022React Day Berlin 2022
29 min
Get rid of your API schemas with tRPC
Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation. In this talk we will understand the benefit of tRPC and how apply it in a NextJs application. If you want reduce your project complexity you can't miss this talk.
Step aside resolvers: a new approach to GraphQL execution
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.
Handling Breaking Changes in GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
22 min
Handling Breaking Changes in GraphQL
Top Content
Requirements change, but API contracts are forever - I wish! A breaking change is something that is not backwards compatible. This means that a consumer of your API would not be able to use the new version without making a code change themselves. We avoid breaking changes if possible, but there are cases when they are inevitable. It could be something small: like making a mandatory field optional. Or it could be something big: like removing a query or a mutation. In this talk we'll review the types of breaking changes you may encounter and how to deal with them gracefully.
Advanced Patterns for API Management in Large-Scale React Applications
React Advanced Conference 2021React Advanced Conference 2021
20 min
Advanced Patterns for API Management in Large-Scale React Applications
Top Content
In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner.
Safely Handling Dynamic Data with TypeScript
Node Congress 2021Node Congress 2021
29 min
Safely Handling Dynamic Data with TypeScript
TypeScript makes JavaScript safer adding static type definitions. Static definitions are wonderful; they prevent developers from making trivial mistakes ensuring every assignment and invocation is done correctly. A variable typed as a string cannot be assigned a number, and a function expecting three arguments cannot be called with only two. These definitions only exist at build time though; the code that is eventually executed is just JavaScript. But what about the response from an API request? In this talk Ethan Arrowood, Software Engineer 2 @ Microsoft, he will cover various solutions for safely typing dynamic data in TypeScript applications. This talk features popular technologies such as Fastify, JSON Schema, Node.js, and more!
APIs are Evolving. Again.
JSNation 2023JSNation 2023
28 min
APIs are Evolving. Again.
As developers we stand on the shoulders of giants, and it can be helpful to take a look at the past to gain a better perspective. In this talk we’ll briefly explore the past decade of backend development and architectural patterns.
We’ve often ditched technologies in an attempt to make the developer experience frictionless. However we sometimes forget what we can learn from “the good old days”.
What are you building: a monolith, a microservices system or something in between? A shift in how we see things can help us keep moving forwards.

Workshops on related topic

Building GraphQL APIs on top of Ethereum with The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.
Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
Database Workflows & API Development with Prisma
Node Congress 2022Node Congress 2022
98 min
Database Workflows & API Development with Prisma
WorkshopFree
Nikolas Burk
Nikolas Burk
Prisma is an open-source ORM for Node.js and TypeScript. In this workshop, you’ll learn the fundamental Prisma workflows to model data, perform database migrations and query the database to read and write data. You’ll also learn how Prisma fits into your application stack, building a REST API and a GraphQL API from scratch using SQLite as the database.
Table of contents:
- Setting up Prisma, data modeling & migrations- Exploring Prisma Client to query the database- Building REST API routes with Express- Building a GraphQL API with Apollo Server
Best Practices and Patterns for Managing API Requests and States
React Advanced Conference 2022React Advanced Conference 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
Thomas Findlay
Thomas Findlay
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.
Building GraphQL APIs With The Neo4j GraphQL Library
GraphQL Galaxy 2021GraphQL Galaxy 2021
175 min
Building GraphQL APIs With The Neo4j GraphQL Library
WorkshopFree
William Lyon
William Lyon
This workshop will explore how to build GraphQL APIs backed Neo4j, a native graph database. The Neo4j GraphQL Library allows developers to quickly design and implement fully functional GraphQL APIs without writing any resolvers. This workshop will show how to use the Neo4j GraphQL Library to build a Node.js GraphQL API, including adding custom logic and authorization rules.

Table of contents:
- Overview of GraphQL and building GraphQL APIs
- Building Node.js GraphQL APIs backed a native graph database using the Neo4j GraphQL Library
- Adding custom logic to our GraphQL API using the @cypher schema directive and custom resolvers
- Adding authentication and authorization rules to our GraphQL API