vue-persistent-storage-manager
Vue plugin that wraps the StorageManager API and provides the state of the persistent-storage
permission alongside a storage estimate.
Features
- 🔧 Persistent storage: Request and monitor the
persistent-storage
permission.
- 💽 Storage estimate: Get storage quota and usage estimates.
- 🔁 Reactive: Provides observable state using Vue's reactivity
- ✔️ SSR: Supports server-side-rendering by validating the availability of the StorageManager API.
Installation
$ yarn add vue-persistent-storage-manager
$ npm install vue-persistent-storage-manager
Usage
import Vue from 'vue'
import { VuePersistentStorageManager } from 'vue-persistent-storage-manager'
Vue.use(VuePersistentStorageManager, { watchStorage: true })
Options are not required.
In this case, watchStorage
will default to false
.
Note: If watchStorage
is set to true
, the functions localStorage.setItem
and localStorage.removeItem
are replaced by functions that update the StorageEstimate.
The original functions will still be called and are available as localStorage.originalSetItem
and localStorage.originalRemoveItem
<template>
<div>
<button :disabled="!$storageManager.isAvailable || $storageManager.isPersistent" @click="$storageManager.requestPersistentStorage()">
{{ $storageManager.isPersistent ? 'Persistence granted' : 'Request persistence' }}
</button>
<p>{{ (100 * $storageEstimate.usage) / $storageEstimate.quota }}%</p>
<p>{{ $storageEstimate.usage / 1000000 }}MB</p>
</div>
</template>
Nuxt
- Create the file
plugins/persistentStorageManager.ts
with the following content.
import Vue from 'vue'
import { VuePersistentStorageManager } from 'vue-persistent-storage-manager'
export default () => {
Vue.use(VuePersistentStorageManager, { watchStorage: true })
}
- Update the
plugins
array in nuxt.config.js
.
export default {
plugins: [
{ src: '~/plugins/persistentStorageManager.ts' },
],
}
Development
$ yarn install
$ yarn build
$ yarn lint
$ yarn test
License
MIT - Copyright © Jan Müller