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
$ yarn add vue-persistent-storage-manager

# npm
$ 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

1. 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 })
}

2. Update the plugins array in nuxt.config.js.

export default {
  plugins: [{ src: '~/plugins/persistentStorageManager.ts' }],
}

Development

# install dependencies
$ yarn install

# build for production
$ yarn build

# lint project files
$ yarn lint

# run tests
$ yarn test

License

MIT - Copyright © Jan Müller