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

vue-storage-plus

v2.0.2

Published

1. npm install 2. jest test.js

Downloads

15

Readme

vue-storage-plus ·

Build Status npm version codecov

npm use:

npm i vue-storage-plus -S

Purpose:

reading localStorage or sessionStorage samplify api

normal using, there are often such long and stinky code, the purpose is to deal with this kind of duplicate code!

var test = localstroage.get('test');
if (test && typeof test === 'string') {
    try {
        test = JSON.parse(test);
    } catch (error) {
        test = {}; //parse faild
    }
} else {
    test = {}; //default
}
console.log(test);

Check test.js to find more use case. TestCase

API:

set(key,value)

//set A=[3, 4, 5]
storage.set('A', [3, 4, 5]);
//set A=[1, 2, 3], B=true, C='test'
storage.set(['A', 'B', 'C'], [[1, 2, 3], true, 'test']);

get(key, ?default=any_value)

get the key value from storage

if ?type is exist, where storage data is null or undefined, then return the default value of type

if ?default is exist, if the read key does not exist or storage data is null or undefined, output the default value.

get(key, ?default=Array|Boolean|Object|String|Number)

same function as get(key, ?default=any_value)

  • Array = []
  • Boolean = false
  • Object = {}
  • String = ''
  • Number = 0
//clear data first.
this.$storage.clear();
//get A, if A is null or undefined, then return ''
this.$storage.get('A');
//get B, if B is null or undefined, then return [1,2,3]
this.$storage.get('B', [1, 2, 3]);
//get C&D, if C&D is null or undefined, then return {C:false,D:'default'}
this.$storage.get(['C','D'], [false, 'default']);
//get E&F, if E&F is null or undefined, then return {E:[1, 2, 3],F:true,G:''}
this.$storage.set(['E', 'F', 'G'], [[1, 2, 3], true]);
let res = this.$storage.get(['E','F','G']); //res={E:[1, 2, 3],F:true,G:''}
let [E,F] = [...res];

this.$storage.get('C', Array) //if C is null, return [];
this.$storage.get('H', Object) //if H is null, return {};

using by window

open Api:

  • window.$ls
  • window.$storage
  • window.$localStorage
  • window.$ss
  • window.$sessionStorage
import { install as storageInstall } from 'vue-storage-plus';
Vue.use(storageInstall);

window.$ls.set('A', true);
window.$ls.get('A'); //true
window.$ls.get('B', 'B'); //return 'B'
window.$localStorage.get('E', 'E'); //return 'E'

window.$ss.get('C', 'C'); //return 'C'
window.$sessionStorage.get('D', 'D'); //return 'D'

vue project using

//in main.js
import { install as storageInstall } from 'vue-storage-plus';
Vue.use(storageInstall);

//in any *.vue function

mounted() {
    this.$storage.set('arr', [3, 4, 5]);
    this.$storage.set('num', 110);
    this.$storage.set('boo', false);

    this.$storage.get('arr', [1, 2, 3]);   //([3, 4, 5]);
    this.$storage.get('num', 4);   //(110);
    this.$storage.get('boo', true);   //(false);
}

Work with Webpack

Webpack 4
// in your vue.config.js, add the code, then when you run webpack, it will transpile es6 to es5:
transpileDependencies: ['vue-storage-plus']

Webpack 3
//If you want to support low-version browsers, you need to refer to "babel-polyfill" and add transformations to "babel-loader"
{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
        resolve('src'),
        resolve('node_modules/vue-storage-plus')
    ]
}

API alias

this.$storage.set('boo', false); //localStorage
this.$ls.set('boo', false); //localStorage
this.$localStorage.set('boo', false); //localStorage

this.$sessionStorage.set('boo', false); //sessionStorage
this.$ss.set('boo', false); //sessionStorage

import using

import { ls, ss, LocalStroage, SessionStorage } from 'vue-storage-plus';
ls.set('boo', false);
ls.get('boo');

ss.set('boo', false);
ss.get('boo');

let storage = new LocalStroage();
storage.set('arr', [3, 4, 5]);
storage.get('arr', [1, 2, 3]);   //([3, 4, 5]);

set data

//set A=[3, 4, 5]
storage.set('A', [3, 4, 5]);
//set A=[1, 2, 3], B=true
storage.set(['A', 'B'], [[1, 2, 3], true]);

get value

//get A, if A is null or undefined, then return ''
this.$storage.get('A');

//get B, if B is null or undefined, then return [1,2,3]
this.$storage.get('B', [1, 2, 3]);

//get C&D, if C&D is null or undefined, then return {C:false,D:'default'}
this.$storage.get(['C','D'], [false,'default']);

this.$storage.set(['E', 'F'], [[1, 2, 3], true]);
//get E&F, if E&F is null or undefined, then return {E:[1, 2, 3],F:true}
let res = this.$storage.get(['E','F']);
let [E,F] = [...res];

Read a non-existent data and specify the default value returned (parameter 2)

storage.clear();
storage.get('arr', [1, 2, 3]);//[1, 2, 3];
storage.get('num', 4);//4;
storage.get('boo', true);//true
storage.get('str', 'this is my string');//'this is my string'
storage.get('obj', { a: 1, b: 2 });// { a: 1, b: 2 }

delete data

storage.set('arr', [3, 4, 5]);
storage.set('num', 110);
storage.set('boo', false);
storage.set('str', 'this is str');
storage.set('obj', { name: {} });

storage.remove('arr');
storage.remove('arr,num,boo');
storage.remove(['arr,num,boo']);
storage.clear();

Read an existing data without specifying the default value returned

storage.set('arr', [3, 4, 5]);
storage.set('num', 110);
storage.set('boo', false);
storage.set('str', 'this is str');
storage.set('obj', { name: {} });

storage.get('arr');   //([3, 4, 5]);
storage.get('num');   //(110);
storage.get('boo');   //(false);
storage.get('str');   //('this is str');
storage.get('obj');   //({ name: {} });

Read the data and specify the return type and default value. If the data can be converted to the type at write time, the default value are ignored

storage.set('arr', [3, 4, 5]);
storage.set('num', 110);
storage.set('boo', false);
storage.set('str', 'this is str');
storage.set('obj', { name: {} });

storage.get('arr', [1, 2, 3]);   //([3, 4, 5]);
storage.get('num', 4);   //(110);
storage.get('boo', true);   //(false);
storage.get('str', 'string??');   //('this is str');
storage.get('obj', { a: 1, b: 2 });   //({ name: {} });

Run test case

  1. npm install
  2. jest test.js

LICENSE

MIT

You are welcome to contribute

[email protected]