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;if test && typeof test === 'string' try test = JSON; catch error test = {}; //parse faild else test = {}; //defaultconsole;
Check test.js to find more use case.
API:
set(key,value)
//set A=[3, 4, 5]storage;//set A=[1, 2, 3], B=true, C='test'storage;
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$storageclear;//get A, if A is null or undefined, then return ''this$storage;//get B, if B is null or undefined, then return [1,2,3]this$storage;//get C&D, if C&D is null or undefined, then return {C:false,D:'default'}this$storage;//get E&F, if E&F is null or undefined, then return {E:[1, 2, 3],F:true,G:''}this$storage;let res = this$storage; //res={E:[1, 2, 3],F:true,G:''}let EF = ...res; this$storage //if C is null, return [];this$storage //if H is null, return {};
using by window
open Api:
- window.$ls
- window.$storage
- window.$localStorage
- window.$ss
- window.$sessionStorage
;Vue; window$ls;window$ls; //truewindow$ls; //return 'B'window$localStorage; //return 'E' window$ss; //return 'C'window$sessionStorage; //return 'D'
vue project using
//in main.js;Vue; //in any *.vue function { this$storage; this$storage; this$storage; this$storage; //([3, 4, 5]); this$storage; //(110); this$storage; //(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:
API alias
this$storage; //localStoragethis$ls; //localStoragethis$localStorage; //localStorage this$sessionStorage; //sessionStoragethis$ss; //sessionStorage
import using
;ls;ls; ss;ss; let storage = ;storage;storage; //([3, 4, 5]);
set data
//set A=[3, 4, 5]storage;//set A=[1, 2, 3], B=truestorage;
get value
//get A, if A is null or undefined, then return ''this$storage; //get B, if B is null or undefined, then return [1,2,3]this$storage; //get C&D, if C&D is null or undefined, then return {C:false,D:'default'}this$storage; this$storage;//get E&F, if E&F is null or undefined, then return {E:[1, 2, 3],F:true}let res = this$storage;let EF = ...res;
Read a non-existent data and specify the default value returned (parameter 2)
storageclear;storage;//[1, 2, 3];storage;//4;storage;//truestorage;//'this is my string'storage;// { a: 1, b: 2 }
delete data
storage;storage;storage;storage;storage; storage;storage;storage;storageclear;
Read an existing data without specifying the default value returned
storage;storage;storage;storage;storage; storage; //([3, 4, 5]);storage; //(110);storage; //(false);storage; //('this is str');storage; //({ 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;storage;storage;storage;storage; storage; //([3, 4, 5]);storage; //(110);storage; //(false);storage; //('this is str');storage; //({ name: {} });
Run test case
- npm install
- jest test.js
LICENSE
MIT