googlechromelabs / kv-storage-polyfill

A polyfill for the kv-storage built-in module.

kv-storage polyfill

A polyfill for the kv-storage built-in module.

Usage

First, ensure you have an Import Map defined to enable the browser version where supported:

<script type="importmap">
{
  "imports": {
    "/node_modules/kv-storage/dist/kv-storage-polyfill.mjs": [
      "std:kv-storage",
      "/node_modules/kv-storage/dist/kv-storage-polyfill.mjs"
    ]
  }
}
</script>

Then import the polyfill. If the browser supports std:kv-storage natively, it will use that instead:

import { storage } from '/node_modules/kv-storage/dist/kv-storage-polyfill.mjs';

(async () => {
  await storage.set("mycat", "Tom");
  console.assert(await storage.get("mycat") === "Tom");

  console.log(await storage.entries());
  // Logs [["mycat", "Tom"]]

  await storage.delete("mycat");
  console.assert(await storage.get("mycat") === undefined);
})();

Available Module Formats

ES Modules: (for everything)

import storage from 'kv-storage-polyfill';  // default storage namespace
import { StorageArea } from 'kv-storage-polyfill';  // instantiable StorageArea class
import storage, { StorageArea } from 'kv-storage-polyfill';  // you can combine

CommonJS: (for Node/browserify)

const storage = require('kv-storage-polyfill');  // default storage namespace
const storage = require('kv-storage-polyfill').default  // also works, just an alias
const { StorageArea } = require('kv-storage-polyfill');  // instantiable StorageArea class

UMD/AMD: (for compatibility)

define(['/web/kv-storage-polyfill.umd.js'], function(storage) {
  storage === storage.default // default storage area
  storage.StorageArea  // instantiable StorageArea class
});

Browser Globals: (for demos)

<script src="/web/kv-storage/polyfill.umd.js"></script>
<script>
  const { StorageArea } = kvStoragePolyfill;
  const storage = kvStoragePolyfill;  // optional `.default` if you want
</script>

License

Apache 2

kv-storage-polyfill's Issues

Module paths in README need to be updated

Instances of

/node_modules/kv-storage/dist/kv-storage-polyfill.mjs

should be

/node_modules/kv-storage-polyfill/dist/kv-storage-polyfill.mjs

Move default storage to default export following pending spec update

The change in WICG/kv-storage#71 changes the exported name of the default Storage instance from storage to default.

ReferenceError: self is not defined

I tried to use this polyfill with Node.js, but trying to perform a .get causes an exception. Here's a repro:

const storage = require('kv-storage-polyfill').default
storage.get("a")

This happens on Node.js v12.5.0 on macOS.

Update example for storage.entries()

In the example code in the usage section of the readme, it has:

console.log(await storage.entries());
// Logs [["mycat", "Tom"]]

but this will produce an empty object because storage.entries() is async iterable. The console output looks like this currently:

d {}
__proto__:
next: ƒ ()
return: ƒ ()
Symbol(Symbol.asyncIterator): ƒ ()
constructor: ƒ ()
__proto__: Object

Perhaps the example can include something like this instead:

for await (const [k, v] of storage.entries()) {
  console.log( [k, v] );
  // Logs ["mycat", "Tom"]
}

File location confusion

The repository has a src/ directory with .js files

The distributed package has a dist/ directory with .js and .mjs files

The README suggests using /node_modules/kv-storage/index.mjs which exists in neither case.

What's the plan?

In Chrome Canary, export is not found in kv-storage-polyfill.

Wasn't able to submitt a Chromium bug (got 400 error trying to submit the form), so pinging here instead.

On https://podd.app/ in Chrome Canary I'm getting:

When I open the file I see a S as storage export though... 🤔

Chrome 79.0.3915.0 canary (64 bit)
bcb279bcb4aab2d9bfa914d87584a506da473e1a-refs/branch-heads/3915@{#1}

Works fine in Chrome stable though.