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

pull-persist

v1.0.5

Published

unoffical persistor for pullstate state manager library

Downloads

7

Readme

PullPersistor

PullPersistor is a utility class designed to persist the state of a pullstate store to either localStorage or sessionStorage. It helps in maintaining state across page reloads or browser sessions.

Installation

You can install PullPersistor from npm:

npm install pull-persist

Usage

Importing the Class

First, import the PullPersistor class into your project:

import PullPersistor from 'pull-persist';

Initializing the Persistor

Create an instance of PullPersistor by passing your pullstate store, a unique key for storage, and optionally, the type of storage ('LOCAL' or 'SESSION'). The default storage type is 'LOCAL'.

import { Store } from 'pullstate';
import PullPersistor from 'pull-persist';

// Define your store type
type CounterState = {
  count: number;
};

// Create a pullstate store
const counterStore = new Store<CounterState>({
  count: 0,
});

// Initialize PullPersistor with the store, a key, and storage type
const persistor = new PullPersistor<CounterState>(counterStore, 'counterState', 'LOCAL');

// Initialize the persistor to load state from storage and subscribe to changes
persistor.initialize();

Handling Restored State

You can provide an optional callback to initialize that will be called with the restored state (if any) when the persistor is initialized:

persistor.initialize((restoredState) => {
  if (restoredState) {
    console.log('State restored:', restoredState);
  } else {
    console.log('No state found in storage');
  }
});

API

PullPersistor<T>

Constructor

constructor(
  store: Store<T extends object ? T : object>,
  key: string,
  storageType: 'LOCAL' | 'SESSION' = 'LOCAL',
  storePrefix: string = 'pullstate'
)
  • store: The pullstate store to persist.
  • key: A unique key to identify the storage entry.
  • storageType: The type of storage to use ('LOCAL' for localStorage or 'SESSION' for sessionStorage). Defaults to 'LOCAL'.
  • storePrefix: A prefix for the storage key. Defaults to 'pullstate'.

Methods

initialize(onRestore?: (state: T | null) => any): void

Initializes the persistor, loading the state from storage if available and subscribing to store changes.

  • onRestore: An optional callback that receives the restored state (or null if no state was found).

Example

import { Store } from 'pullstate';
import PullPersistor from 'pull-persist';

type CounterState = {
  count: number;
};

const counterStore = new Store<CounterState>({ count: 0 });

const persistor = new PullPersistor<CounterState>(counterStore, 'counterState', 'LOCAL');

persistor.initialize((restoredState) => {
  if (restoredState) {
    console.log('State restored:', restoredState);
  } else {
    console.log('No state found in storage');
  }
});

In this example, PullPersistor is used to persist the state of a simple counter across page reloads using localStorage. The restored state is logged to the console when the persistor is initialized.

License

This project is licensed under the MIT License. See the LICENSE file for more details.