Storing Data From Streams In The Browser Using SessionStorage

We are playing with different ways of working with streams of data in the browser, trying to understand the potential of working with and refining the data we receive via APIs. One of the most common ways to use Streamdata.io is to proxy an existing web API and then display in real time in the browser using our JavaScript SDK. Server-Sent Events (SSE), the technology we employ for our streaming technology excels at streaming data to the browser so that it can be published to the screen for users in real time. Beyond just displaying the raw data, we want to explore other ways of caching data from streams, storing data from streams, and working with data from these streams, allowing for a richer experience in the browser.

One of the approaches to working with data made available via streams in the browser is using sessionStorage, a standard for storing data within a browser’s tab session that is supported by the latest version of all major browsers. Here is an example create, read, update, and delete using sessionStorage:

// Create
const user = { name: 'Ire Aderinokun', age: 25 }
sessionStorage.setItem('user', JSON.stringify(user));
// Read (Single)
console.log( JSON.parse(sessionStorage.getItem('user')) )
// Update
const updatedUser = { name: 'Ire Aderinokun', age: 24 }
sessionStorage.setItem('user', JSON.stringify(updatedUser));
// Delete
sessionStorage.removeItem('user');

Providing a valuable set of commands that could easily be added to the Streamdata.io JavaScript SDK for working with the initial update received from an API, as well as each incremental update. Allowing each stream to be captured, filtered, and then saved or combine in a way that will persist throughout a user’s session with a tab. All data stored using sessionStorage will go away once the tab is closed, or deleted using the removeItem command, but it wouldn’t be hard to save, or persist using other approaches if data is needed outside a single browser session.

An example of using sessionStorage in the browser might involve favoriting or bookmarking items as they come in via a stream, or maybe across multiple streams. Allowing them to be saved outside of the stream of data flowing in from the API, and potentially being buried in the UI as more data flows in. SessionStorage allows for storing of up to 10MB in the browser, depending on the browser. Providing a pretty compelling approach to local storage in the browser of data extracted from streams, introducing a human layer for monitoring, filtration, and curation. We’ll keep playing with sessionStorage to see what is possible when you apply it to different types of streams, and the variety of data you can make available using Streamdata.io, and we’ll share any interesting stories when we can here on the blog.