vue-storage-plus ·

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.

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]