the real reactive watcher for localStorge. I search a few days for a lib to watch the ls, but failed.
you can use this tiny storage wrapper which works well with Vue 3.
npm install next-vue-storage-watcher --save
import { createApp } from 'vue'
import { createWatcher }from 'next-vue-storage-watcher';
export const lsWatcher = createWatcher({
prefix:"test_ls_"
})
export const ssWatcher =createWatcher({
prefix:"test_ss_",
storage:"session"
})
createApp(App)
.use(lsWatcher)
.use(ssWatcher)
.mount('#app')
storage type
_Storage_Watcher_
local
which means window.localStorage will be used as Storage Object. Another alternative is session
import { useLSWatcher } from "next-vue-storage-watcher";
import { useSSWatcher } from "next-vue-storage-watcher";
const ls = useLSWatcher()
const ss = useSSWatcher()
export const lsWatcher = createWatcher({
prefix:"test_ls_"
})
import { lsWatcher as ls } from "../main";
const msg = ls.getItem("msg");
I will list basic api just with ls.
ls.setItem("token","jwt")
the value will be saved in storage with the prefix + key
you also can give the key an expire duration with the unit of
(ms)
ls.setItem("token","jwt",3000)
the key will be expried in 3s, you will get null after that.
info will return {value:"xx",expire:1638634163710}
the value of expire is the timestamp when the key will be expired, it is calculated internally.
the value prop is reactive
, expire is **NOT** reactive
, just the snapshot of that second
expire will be null
if one of the following scenarios happen:
ls.info('token');
ls.getItem('token', 'default');
get the value with a default return value if it's not existed
the returned value is Ref, you just use it as other Ref values in Vue 3. Automaticly unwrap in template, xx.value used in script
ls.removeItem('token');
remove will delete the key in storage and emit with null
value
ls.clear();
delete all the keys with your prefix
. and all the value will be null
**NOT**
to set value as following, the correct way is to use setItemconst ls = useLSWatcher()
let msg = ls.getItem("msg")
// wrong usage
msg.value = "new msg" // !!!you will receive a warning
Thanks goes to these wonderful people (emoji key):
Vincent Guoπ» π π |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!