Awesome

Next-vue-storage-watcher

Vue 3 version (vue 2 pls refer to here)

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.

• reactive
• type supported
• small size

Install

npm install next-vue-storage-watcher --save

Sample Code

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

• localStorage
• sessionStorage

Options

• prefix => default is _Storage_Watcher_
• storage => default is local which means window.localStorage will be used as Storage Object. Another alternative is session

Methods

Usage in setup

import { useLSWatcher } from "next-vue-storage-watcher";
import { useSSWatcher } from "next-vue-storage-watcher";

const ls = useLSWatcher()
const ss = useSSWatcher()

Usage outside setup

• main.ts

export const lsWatcher = createWatcher({
    prefix:"test_ls_"
})

• user.ts

import { lsWatcher as ls } from "../main";

const msg = ls.getItem("msg");

I will list basic api just with ls.

setItem

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

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:

• the key is non-exist
• the key is already expired
• the key has no expire time

ls.info('token');

getItem

ls.getItem('token', 'default');

get the value with a default return value if it's not existed

the returned value is Ref<any>, you just use it as other Ref values in Vue 3. Automaticly unwrap in template, xx.value used in script

removeItem

ls.removeItem('token');

remove will delete the key in storage and emit with null value

clear

ls.clear();

delete all the keys with your prefix. and all the value will be null

FAQ

• pls **NOT** to set value as following, the correct way is to use setItem

const ls = useLSWatcher()

let msg = ls.getItem("msg")
// wrong usage
msg.value = "new msg" // !!!you will receive a warning

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!