vuejs-storage
Vue.js and Vuex plugin to persistence data with localStorage/sessionStorage
Purpose
This plugin provide a simple binding with localStorage and sessionStorage (or something similar) to Vue and Vuex.
It has no dependencies, so it is really small.
.jssize: 5.75KB (1.7KB gzipped).min.jssize: 2.21KB (1.1KB gzipped)
Usage
//in webpack environment:
import vuejsStorage from 'vuejs-storage'
//in browser script tag:
const vuejsStorage = window.vuejsStorage
Vue.use(vuejsStorage)
//vue example
new Vue({
//...
data: {
count: 0,
text: ''
},
storage: {
keys: ['count'],
//keep data.count in localStorage
namespace: 'my-namespace'
}
})
//vuex example
const store = new Vuex.Store({
//state...
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
plugins: [
vuejsStorage({
keys: ['count'],
//keep state.count in localStorage
namespace: 'my-namespace',
driver: vuejsStorage.drivers.sessionStorage
//if you want to use sessionStorage instead of localStorage
})
]
})
Nested key
data: {
a: {
b: 1,
c: 2
}
},
storage: {
namespace: 'test',
keys: ['a.b']
//only keep a.b in localStorage
}
Vuex modules
state: {
a: 1
},
modules: {
moduleA: {
state: {
a: 2
}
}
},
plugins: [
vuejsStorage({
namespace: 'test',
keys: ['moduleA','a']
// keep both root's state.a & moduleA's state
})
]
Multiple storage
data: {
a: 1,
b: 2
},
storage: [
{
namespace: 'test',
keys: ['a']
},
{
namespace: 'test',
keys: ['b'],
driver: vuejsStorage.drivers.sessionStorage
}
]
API
vuejsStorage
Vue plugin
Vue.use(vuejsStorage)
vuejsStorage(option)
Create a Vuex plugin
const vuexplugin = vuejsStorage(/* option object*/)
option
Option object, can be used when create Vuex plugin or in Vue option storage field
{
keys: [], //array of string
/*
this option is different when use in vue and vuex
when used in Vue constructor option, keys means which data should be keep in localStorage
when used in Vuex plugin, keys mean which state should be keep in localStorage
*/
driver: vuejsStorage.drivers.sessionStorage, //any object has 'set','get','has' api, default: vuejsStorage.drivers.localStorage
namespace: 'ns', //a string, REQUIRED
merge: _assign //a function to merge object like Object.assign, default: internal implementation(src/assign.ts)
}
2.4k Dec 29, 2022
0 Jan 3, 2022
1.4k Dec 2, 2022
145 Dec 22, 2022
91 Dec 28, 2022
155 Nov 19, 2022
1.6k Dec 30, 2022
23 Apr 2, 2022
18 Jul 30, 2020
1 May 18, 2021
0 Apr 13, 2020
309 Dec 8, 2022
12 Jul 30, 2020
42 Aug 10, 2022
0 Dec 30, 2021
5.8k Jan 5, 2023
160 Dec 24, 2022
65 Jun 29, 2022
27 Mar 26, 2021