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

ClientStorage

v4.0.1

Published

Bulletproof persistent browser storage, works with disabled Cookies and/or localStorage

Downloads

1,313

Readme

support support

Persistent Browser (Client) Storage

  • 👷 100% Tests coverage;
  • 📦 No external dependencies;
  • 💪 Bulletproof persistent Client storage;
  • ㊗️ With Unicode support for values and keys;
  • 👨‍💻 With String, Array, Object, and Boolean support as values;
  • ♿ Works with disabled localStorage and cookies;
  • Available via 📦 NPM and ☄️ Atmosphere.

ClientStorage NPM library logo

Install:

npm install --save ClientStorage

Install Meteor:

# Via Atmosphere
meteor add ostrio:cstorage
# Via NPM
meteor npm install --save ClientStorage

Require:

var ClientStorage = require('ClientStorage').ClientStorage;
var clientStorage = new ClientStorage();

ES6 Import:

import { ClientStorage } from 'ClientStorage';
const clientStorage = new ClientStorage();

ES6 Import (Meteor):

import { ClientStorage } from 'meteor/ostrio:cstorage';
const clientStorage = new ClientStorage();

Usage:

  • clientStorage.get('key') - Read a record. If the key doesn't exist a undefined value will be returned;
    • key - {String} - Record's key;
  • clientStorage.set('key', value[, ttl]) - Create/overwrite a value in storage;
    • key - {String} - Record's key;
    • value - {String|[mix]|Boolean|Object} - Record's value (content);
    • ttl - {Number} — [Optional] Record's TTL in seconds;
  • clientStorage.remove('key') - Remove a record;
    • key - {String} - Record's key;
  • clientStorage.has('key') - Check whether a record exists, returns a boolean value;
    • key - {String} - Record's key;
  • clientStorage.keys() - Returns an array of all storage keys;
  • clientStorage.empty() - Empty storage (remove all key/value pairs). Use with caution! (May remove cookies which weren't set by you).

Alternate usage:

By default ClientStorage package handle selecting storage driver in the next order (descending priority):

  1. localStorage
  2. cookies
  3. js (JS Object driven storage)

To alter priority pass "preferred driver" to new ClientStorage(driverName) constructor.

Use cookies only:

Pass cookies as an argument to new instance of ClientStorage:

const { clientStorage } = require('ClientStorage');
var cookiesStorage = new ClientStorage('cookies');
cookiesStorage.has('locale'); // false
cookiesStorage.set('locale', 'en_US'); // true

Use localStorage only:

Pass localStorage as an argument to new instance of ClientStorage:

const { clientStorage } = require('ClientStorage');
var locStorage = new ClientStorage('localStorage');
locStorage.has('locale'); // false
locStorage.set('locale', 'en_US'); // true

Use js only:

Pass js (in-memory js object) as an argument to new instance of ClientStorage:

const { clientStorage } = require('ClientStorage');
var jsStorage = new ClientStorage('js');
jsStorage.has('locale'); // false
jsStorage.set('locale', 'en_US'); // true

Note: All instances are sharing same cookie and localStorage records!

[Meteor] Add reactivity:

Persistent ReactiveVar implementation:

import { ReactiveVar } from 'meteor/reactive-var';
import { ClientStorage } from 'meteor/ostrio:cstorage';
const clientStorage = new ClientStorage();

const persistentReactive = (name, initial = undefined) => {
  let reactive;
  if (clientStorage.has(name)) {
    reactive = new ReactiveVar(clientStorage.get(name));
  } else {
    clientStorage.set(name, initial);
    reactive = new ReactiveVar(initial);
  }

  reactive.set = function (newValue) {
    let oldValue = reactive.curValue;
    if ((reactive.equalsFunc || ReactiveVar._isEqual)(oldValue, newValue)) {
      return;
    }
    reactive.curValue = newValue;
    clientStorage.set(name, newValue);
    reactive.dep.changed();
  };

  return reactive;
};

const layout = persistentReactive('ui-layout', 'two-columns');
layout.get(); // two-columns
layout.set('single-column');

Examples:

const clientStorage = new (require('ClientStorage').ClientStorage);

clientStorage.set('locale', 'en'); // true
clientStorage.set('country', 'usa'); // true
clientStorage.set('gender', 'male'); // true

clientStorage.get('gender'); // male

clientStorage.has('locale'); // true
clientStorage.has('city'); // false

clientStorage.keys(); // ['locale', 'country', 'gender']

clientStorage.remove('locale'); // true
clientStorage.get('locale'); // undefined

clientStorage.keys(); // ['country', 'gender']

clientStorage.empty(); // true
clientStorage.keys(); // []

clientStorage.empty(); // false

Running Tests

  1. Clone this package
  2. In Terminal (Console) go to directory where package is cloned
  3. Then run:

Meteor/Tinytest

# Default
meteor test-packages ./

# With custom port
meteor test-packages ./ --port 8888

# With local MongoDB and custom port
MONGO_URL="mongodb://127.0.0.1:27017/client-storage-tests" meteor test-packages ./ --port 8888

Support this project: