Chrome announces KV Storage, the first built-in module for Web

2 min read

Google Chrome announced details regarding an experimental new ‘built-in modules’ feature, called, KV Storage, yesterday. KV Storage is the first asynchronous key/value storage module, shipped by Chrome.

Built-in modules are very similar to regular JavaScript modules except that they don’t need to be downloaded–since they’re shipped with the browser. Built-in modules need to go through a standardization process where each of the modules has their own specification requiring a design review and positive signs of support. Users can import a built-in module using a prefix ‘std:’ followed by the built-in module’s identifier.

KV Storage module is quite simple and similar to the localStorage API. However, instead of getItem(), setItem(), and removeItem(), it consists of get(), set(), and delete(). It also includes different map-like methods that are not available to localStorage such as keys(), values(), and entries(). Also, similar to a Map, its keys are not strings. However, unlike Map, all the KV Storage methods return either promises or async iterators.

Other than that, the KV Storage module has two named exports: storage and StorageArea. Storage is an instance of the StorageArea class consisting of the name ‘default’, and this is what developers use most often as a part of their application code. For the StorageArea class, additional isolation is needed. Also, StorageArea data gets stored in an IndexedDB database with the name kv-storage:${name}.

Moreover, you don’t have to wait to use KV storage in your code until all browsers support it. This is because Chrome is currently working on another feature called import maps that lets you use built-in modules as soon as even one browser supports them. Import maps refer to a mechanism that allows developers to alias import identifiers to one or more alternate identifiers.

This is quite efficient as it allows users to resolve a particular import identifier across your entire application. However, for cases where the browsers don’t support modules at all, you have to use import statements, to conditionally load the built-in modules. This also means that you’d have to use module scripts, i.e. <script type=”module”>.

For more information, check out the official Google blog post.