morello.dev

Navigate back to the homepage

You Will Stop Using LocalStorage

Dennis Morello
April 25th, 2019 · 2 min read

When LocalStorage first appeared as part of HTML5 specification, web developers were excited because it exposed a simple way to save and retrieve data in and from the user’s browser.

In this post, we will have a look at a new WICG proposal that aims to be a more performant alternative to LocalStorage.

This blog post talks about a potential future web platform feature called “KV Storage” (short for “Key-Value Storage”). This is currently a proposal made by the Web Incubator Community Group and it should not be used in production environments.

The LocalStorage Interface

The LocalStorage interface allows the developer to store data in the browser in the form of key-value pairs, where both the key and the value are strings. The data is persisted across browser sessions and its scope is limited to the origin where the script that accesses LocalStorage resides.

API

Saving Data

To save data to LocalStorage, simply call the setItem(key, value) method exposed by the window.localStorage object:

1if ('localStorage' in window) {
2 localStorage.setItem('theme', 'dark');
3}

If the data you are going to save is not a string, you have to serialize it before saving it:

1const serializedData = JSON.stringify(myData);
2localStorage.setItem('data', serializedData);

Retrieving Data

To retrieve data, call the getItem(key) method exposed by window.localStorage:

1let savedTheme;
2
3if ('localStorage' in window) {
4 savedTheme = localStorage.getItem('theme');
5}

Following the previous code snippet, savedTheme should hold the value "dark".

Again, if the value you stored was not originally a string, you have to deserialize it:

1const serializedData = localStorage.getItem('data');
2const myData = JSON.parse(serializedData);

Cons of LocalStorage

As we have seen, the LocalStorage API is very simple, but a few non-negligible drawbacks are present:

  • Only strings can be saved; to handle with non-string data, we have to manually perform serialization and deserialization
  • getItem and setItem are synchronous: calling them blocks the main thread, and this potentially prevents the page from being interactive

The only asynchronous alternative to LocalStorage currently available is IndexedDB, which is definitely not known for its ease of use.

The KV Storage Proposal

Key-Value Storage is a proposal made by the Web Incubator Community Group (WICG) that aims to address the drawbacks of LocalStorage we have just mentioned. The specification mandates that it gets implemented by browser vendors as a built-in module and that it uses IndexedDB as its backing store.

Let’s see an example usage of the KV Storage API, as provided by the specification:

1import { storage } from 'std:kv-storage';
2
3(async () => {
4 await storage.set('mycat', 'Tom');
5 console.assert((await storage.get('mycat')) === 'Tom');
6
7 for await (const [key, value] of storage.entries()) {
8 console.log(key, value);
9 }
10
11 await storage.delete('mycat');
12 console.assert((await storage.get('mycat')) === undefined);
13})();

As we can see, set and get APIs are the equivalent for LocalStorage’s setItem and getItem, but they are asynchronous. This means that the main JS thread is not blocked while the data is being fetched or persisted 😄

Try KV Storage Today

If you are curious to experiment today with KV Storage, you have two possibilities:

As you guess, the only web engine currently supporting KV Storage is Chromium from version 74. All web browsers based on Chromium v74+ (such as Google Chrome, Opera and Edge Dev) inherits this feature.

More articles from Dennis Morello

Conditional Rendering In React

A component composition-based approach to conditional rendering.

March 11th, 2019 · 2 min read

React Awesome Reveal

Meet my new library for animating React components using Intersection Observer API and CSS Animations!

December 15th, 2019 · 2 min read
© 2019 Dennis Morello
Link to $https://twitter.com/dennismorelloLink to $https://github.com/dennismorelloLink to $https://instagram.com/dennismrlLink to $https://www.linkedin.com/in/dennismorello