Rahul Singh

Posted on Mar 17

Stop writing localStorage boilerplate — I built Storionjs

#javascript #webdev #localstorage #database

Tired of writing the same localStorage.getItem, JSON.parse, and manual save logic every time you need a bit of client-side data? Storion.js turns your browser storage into a small, easy-to-use database—with tables, simple queries, and a clear API. No backend, no setup. Just install and go.

What is Storion.js?

Storion is a framework-agnostic, in-browser database that works on top of localStorage, sessionStorage, or IndexedDB. Instead of raw key/value strings, you get:

Tables & schemas — Define tables with columns (int, float, boolean, string, json)
CRUD API — insert, fetch, update, delete with a straightforward API
Query engine — Filter, sort, and paginate with a simple JSON query object
Subscriptions — React to data changes with db.subscribe() so your UI stays in sync
Cross-context sync — Works across tabs, extensions, and background scripts

You can use it with React, Vue, Angular, Svelte, or plain JavaScript.

Install & create your first database

Install the package:

npm install @storion/storion

Create a database and a table in a few lines:

import { createDatabase } from '@storion/storion';

const db = await createDatabase({
  name: 'myapp',
  storage: 'localStorage'  // or 'sessionStorage' | 'indexedDB'
});

// Define a table
await db.createTable('users', [
  { name: 'id', type: 'int' },
  { name: 'email', type: 'string' },
  { name: 'name', type: 'string' },
  { name: 'active', type: 'boolean' }
]);

// Insert data
await db.insert('users', { email: 'alice@example.com', name: 'Alice', active: true });

// Fetch with filter and sort
const activeUsers = await db.fetch('users', {
  filter: { active: true },
  sortBy: 'name',
  limit: 10
});

That’s it. No schema migrations, no server—just a small database living in the browser.

Configuration: define everything up front

You can also create the database and all tables from a config object (e.g. from a JSON file). Handy for bigger apps or when you want to version your schema.

import { createDatabase } from '@storion/storion';

const config = {
  tables: {
    users: {
      columns: [
        { name: 'id', type: 'int' },
        { name: 'email', type: 'string' },
        { name: 'active', type: 'boolean' }
      ]
    },
    todos: {
      columns: [
        { name: 'id', type: 'int' },
        { name: 'title', type: 'string' },
        { name: 'done', type: 'boolean' }
      ]
    }
  }
};

const db = await createDatabase({
  name: 'myapp',
  storage: 'localStorage',
  config
});

// Tables are ready; start inserting
await db.insert('todos', { title: 'Try Storion', done: false });

You can load that config from a URL or from a file input—see the Storion docs for loadConfigFromUrl and loadConfigFromFile.

Query with filters and pagination

When you need more than a simple filter, use db.query() with a JSON query:

const { rows, totalCount } = await db.query('users', {
  where: {
    and: [
      { field: 'active', op: 'eq', value: true },
      { field: 'name', op: 'contains', value: 'smith' }
    ]
  },
  orderBy: [{ field: 'name', direction: 'asc' }],
  limit: 20,
  offset: 0
});

Supported operators include eq, ne, gt, gte, lt, lte, contains, startsWith, endsWith, in, notIn, isNull, isNotNull. Full details are in the Storion documentation.

Storion Studio — inspect and edit data in the browser

Storion Studio is a Chrome extension that gives you a visual admin for your Storion data. It uses the same storage layout as the library, so you can:

Create and manage databases and tables from the extension
Insert, edit, and delete rows in a table grid
Run the same JSON query language in a Query panel
Export/import databases as JSON

Install it from the Chrome Web Store, then open it on any page that uses Storion. You can prototype or debug your data without touching code. More info: Storion Studio docs.

Learn more

Full documentation (API, query language, config, sync): storionjs.github.io/storion-docs
npm: @storion/storion
GitHub: github.com/storionjs/storion

Storion keeps the storage layer simple so you can focus on building your app. Give it a try and cut down the localStorage boilerplate for good.

DEV Community