0.5.0 is the first element quality release, covering every A, B and C element. Components rebuild cleanly when moved or re-populated, keyboard and screen-reader access is fixed across the C components, and several XSS paths are closed. Themes gain a --btn-border-width hook,…
VB's client-side storage API: namespaced, async, timestamped values with expiry. Available as window.VB.store and as a named export.
VBStore is the storage layer VB's own components use for preferences and dismissals. Values are namespaced, wrapped with a timestamp so they can expire, and read and written through an async API so the backend can change without touching callers.
// Any page that loads Vanilla Breezeawait VB.store.set('my-app', 'tour-seen', true); // Or as a moduleimport { VBStore } from 'vanilla-breeze/js'; // also exported by core-jsconst seen = await VBStore.get('my-app', 'tour-seen');Every bundled copy shares one store, so values written through VB.store are the ones components read.
| Method | Returns | Notes |
|---|---|---|
set(namespace, key, value) | Promise<void> | Stores any JSON-serializable value with the current time. |
get(namespace, key, { maxAge }?) | Promise<value | null> | null if missing, unreadable, or older than maxAge milliseconds. |
remove(namespace, key) | Promise<void> | Deletes one entry. |
list(namespace) | Promise<{ key, data, timestamp }[]> | Every readable entry in the namespace. |
setMany(namespace, [[key, value], …]) | Promise<void> | Several set calls in one. |
clear(namespace) | Promise<void> | Removes one namespace. |
clearAll() | Promise<void> | Removes every vb:* key and leaves the rest of storage alone. |
configure({ backend }) | — | Swap the backend (see below). null restores the default. |
Namespace and key must be non-empty strings; anything else throws a TypeError.
The default backend is localStorage. An entry is stored under vb:{namespace}:{key} as JSON:
{ "data": { "analytics": true }, "timestamp": 1761955200000 }Writes are not caught: if storage is full or blocked, set rejects with the browser's error. If localStorage doesn't exist at all, the first call throws.
| Namespace | Written by |
|---|---|
theme | Theme manager (theme, mode, accent and other appearance choices) |
settings | <settings-panel>, <theme-picker> |
environment | Environment manager |
consent | <consent-banner> |
notifications | <notification-wc> (dismissed banners) |
watches | data-watch-page and <notification-wc> |
autosave | data-autosave form drafts |
highlights | Highlights & annotations |
layout | <split-surface> pane sizes |
Use your own namespace for app data so clear() on it can't touch VB's.
document.querySelector('#reset').addEventListener('click', async () => { await VB.store.clearAll(); // every vb:* key, nothing else location.reload();});const WEEK = 7 * 24 * 60 * 60 * 1000;if (!(await VB.store.get('my-app', 'promo-dismissed', { maxAge: WEEK }))) { showPromo();}VB.store.configure({ backend: { async getRaw(key) { return sessionStorage.getItem(key); }, async setRaw(key, value) { sessionStorage.setItem(key, value); }, async removeRaw(key) { sessionStorage.removeItem(key); }, async keys(prefix) { return Object.keys(sessionStorage).filter((k) => k.startsWith(prefix)); }, },});/go/ endpoints.