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

svelte-persisted-custom-storage

v0.10.2

Published

A Svelte store that persists to local storage. Supports changes across multiple tabs.

Downloads

4

Readme

svelte-persisted-custom-storage

A Svelte store that persists to local storage. Supports changes across multiple tabs.

This is a fork of joshnuss/svelte-persisted-store. It is backwards compatible with the original package, but adds the ability to specify a custom storage option. This is similar to how the original package allows you to specify a custom serializer (like devalue instead of JSON). See more in the options secton below.

Installation

npm install svelte-persisted-custom-storage

Usage

Define the store:

import { persisted } from 'svelte-persisted-store'

// First param `preferences` is the local storage key.
// Second param is the initial value.
export const preferences = persisted('preferences', {
  theme: 'dark',
  pane: '50%',
  ...
})

Then when you want to use the store:

import { get } from 'svelte/store'
import { preferences } from './stores'

preferences.subscribe(...) // subscribe to changes
preferences.update(...) // update value
preferences.set(...) // set value
get(preferences) // read value
$preferences // read value with automatic subscription

You can also optionally set the serializer, storage and onError type:

import * as devalue from 'devalue'

// third parameter is options.
export const preferences = persisted('local-storage-key', 'default-value', {
  serializer: devalue, // defaults to `JSON`
  storage: 'session', // 'session' for sessionStorage, defaults to 'local'
  syncTabs: true // choose wether to sync localStorage across tabs, default is true
  onError: (e) => {/* Do something */} // Defaults to console.error with the error object
})

As the library will swallow errors encountered when reading from browser storage it is possible to specify a custom function to handle the error. Should the swallowing not be desirable, it is possible to re-throw the error like the following example (not recommended):

export const preferences = persisted('local-storage-key', 'default-value', {
  onError: (e) => {
    throw e
  }
})

New! Custom Storage

// Custom storage example
const CustomStorage = {
  setItem: function(key: string, value: string): void {
    // Your custom logic here to save/store the stringified value...
    // NOTE: value is the serializer.stringify value
  },
  getItem: function(key: string): string {
    // Your custom logic here to get/retrieve the stringified value...
    // NOTE: the returned value will be passed to the serializer.parse
    return stringifiedValue
  },
  // This a required method for the custom storage to work
  // It is a minor quirk to be compatible with the original library 
  // The name is arbitrary and can be anything, but it is best to avoid using 'local' and 'session'
  // since those are the keys used for localStorage and sessionStorage
  // You MUST define the name of the custom storage like this...
  valueOf: () => 'customKey'
}

export const preferences = persisted('local-storage-key', 'default-value', {
  storage: CustomStorage
})

License

MIT