4 Using Javascript for client-side storage

 

This chapter covers

  • Using Javascript as a replacement for centralized cloud storage
  • Handling local file storage using the Javascript Web Storage and IndexedDB client-side storage APIs

In this chapter, you’ll continue working with the Javascript programming of the Code Radio Web3 application from Chapter 3 to add client-side storage to allow it to function fully offline. Modern web browsers support a number of mechanisms for applications to store and retrieve data from a user’s local machine. This chapter focuses on two of these mechanisms: using the Javascript Web Storage and IndexedDB APIs.

Storing data on the user’s local machine can be useful in a number of scenarios, including but not limited to the following:

  • Storing user preferences and site customizations, such as UI themes.
  • Storing and maintaining user activities such as a shopping cart status between application sessions.
  • Storing general application data such as image, music, and video assets locally, so that they load faster in future uses.
  • Storing general application data such as image, music, and video assets locally, so that they can be used without an internet connection.

4.1 Storing Web3 application preferences using the Web Storage API

4.2 Adding dark mode to Code Radio

4.2.1 Using the localStorage API for simple application storage

4.3 Using the IndexedDB API for complex application storage

4.3.1 Creating a new IndexedDB database

4.3.2 IndexedDB error handling

4.3.3 Creating an object store inside an IndexedDB database

4.3.4 Performing CRUD operations with IndexedDB

4.3.5 Considerations of ACID compliance

4.4 Adding client-side storage for Code Radios music files

4.4.1 Encoding music files for IndexedDB storage

4.4.2 Storing encoded files into IndexedDB

4.4.3 Retrieving music files from IndexedDB for playback