npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

web-porridge

v3.0.0

Published

Feature-enhanced wrappers for the Storage and IndexedDB APIs

Downloads

64

Readme

web-porridge

License Version Build

Feature-enhanced wrapper for both, Storage API and IndexedDB API, sharing a common, familiar interface.

Features

  • stores structured data
  • automatic (de)serialization
  • Object-level read & write access
  • data expiry
  • observability
  • convenience methods

Installation

npm install web-porridge -S

Usage

Import

import { Porridge, PorridgeDB } from 'web-porridge';

const localPorridge = new Porridge();
const idb = new PorridgeDB();

Instance

Porridge

new Porridge(store: 'localStorage' | 'sessionStorage' = 'localStorage', eventName = 'porridge.didChange')

PorridgeDB

new PorridgeDB(options?: {db: string; eventName = 'porridgeDB.didChange'; store: string})

Methods

All methods and properties of the Storage API have equivalents on localPorridge / sessionPorridge, completed by additional convenience methods as listed below.

The following methods are available for both, Storage and IndexedDB. However, the key difference is that the former API is synchronous, while the latter is mostly asynchronous.

Table of contents

setItem()

Usage: setItem(key: string, value: any, options?)

When passed a key name and value, will add that key to the given Storage object, or update that key's value if it already exists.

localPorridge.setItem('firstItem', 'Hello World');

localPorridge.setItem('secondItem', { name: 'John Appleseed' });
localPorridge.setItem('secondItem', 'Ada Lovelace', { prop: 'name' });
await idb.setItem('firstItem', 'Hello World');

await idb.setItem('secondItem', { name: 'John Appleseed' });
await idb.setItem('secondItem', 'Ada Lovelace', { prop: 'name' });

getItem()

Usage: getItem(key: string, options?)

When passed a key name, will return that key's value, or null if the key does not exist, in the given Storage object.

localPorridge.getItem('firstItem');
localPorridge.getItem('secondItem', { prop: 'dot.notation.property' });
await idb.getItem('firstItem');
await idb.getItem('secondItem', { prop: 'dot.notation.property' });

removeItem()

Usage: removeItem(key: string, options?)

When passed a key name, will remove that key from the given Storage object if it exists.

localPorridge.removeItem('firstItem');
localPorridge.removeItem('secondItem', { prop: 'dot.notation.property' });
await idb.removeItem('firstItem');
await idb.removeItem('secondItem', { prop: 'dot.notation.property' });

clear()

Usage: clear()

Clears all keys stored in a given Storage object.

localPorridge.clear();
await idb.clear();

key()

Usage: key(index: number)

When passed a number n, returns the name of the nth key in a given Storage object.

localPorridge.key(0);
await idb.key(0);

length

Usage: length

Returns the number of data items stored in a given Storage object.

localPorridge.length;
await idb.length;

hasItem()

Usage: hasItem(key: string)

When passed a key name, returns a boolean indicating whether that key exists in a given Storage object.

localPorridge.hasItem('firstItem');
await idb.hasItem('firstItem');

keys()

Usage: keys()

Returns an array of a given object's Storage own enumerable property names, iterated in the same order that a normal loop would.

localPorridge.keys();
await idb.keys();

values()

Usage: values()

Returns an array of a given Storage object's own enumerable property values, iterated in the same order that a normal loop would.

localPorridge.values();
await idb.values();

entries()

Usage: entries()

Returns an array of a given object's own enumerable string-keyed property [key, value] pairs, iterated in the same order that a normal loop would.

localPorridge.entries();
await idb.entries();

didExpire()

Usage: didExpire(key: string)

When passed a key name, will return whether that key has expired.

localPorridge.didExpire('firstItem');
await idb.didExpire('firstItem');

observe()

Usage: observe(key: string, callback: function, targetOrigins: string[] = [])

When passed a key name and callback function, it will listen to changes to the given Storage object's value. Optionally, changes can also be broadcasted to specified cross-origin targets.

localPorridge.observe('demo', ({ key, newValue }) => {
	console.log(`${key} has changed to:`, newValue);
});
idb.observe('demo', ({ key, value }) => {
	console.log(`${key} has changed to:`, value);
});

Options

expires

Type: string

Sets an expiry date for the storage value. Can be anything that can be parsed by new Date().

prop

Type: string

Specifies an object property as a dot notation string. Allows granular reads and updates.

License

This work is licensed under The MIT License