Awesome
@nuxtjs/localforage
Localforage module for Nuxt.js
Setup
- Add
@nuxtjs/localforage
dependency to your project
yarn add --dev @nuxtjs/localforage # or npm install --save-dev @nuxtjs/localforage
- Add
@nuxtjs/localforage
to thebuildModules
section ofnuxt.config.js
export default {
buildModules: [
// Simple usage
'@nuxtjs/localforage',
// With options
['@nuxtjs/localforage', { /* module options */ }]
]
}
:warning: If you are using Nuxt < v2.9 you have to install the module as a dependency
(No --dev
or --save-dev
flags) and use modules
section in nuxt.config.js
instead of buildModules
.
Using top level options
export default {
buildModules: [
'@nuxtjs/localforage'
],
localforage: {
/* module options */
}
}
Options
driver (optional)
- Default:
[localforage.INDEXEDDB, localforage.WEBSQL, localforage.LOCALSTORAGE]
The preferred driver(s) to use. Same format as what is passed to setStorageDriver()
, above.
name (optional)
- Default:
'nuxtJS'
The name of the database. May appear during storage limit prompts. Useful to use the name of your app here. In localStorage, this is used as a key prefix for all keys stored in localStorage.
version (optional)
- Default:
1.0
The version of your database. May be used for upgrades in the future; currently unused.
size (optional)
- Default:
4980736
The size of the database in bytes. Used only in WebSQL for now.
storeName (optional)
- Default:
'nuxtLocalForage'
The name of the datastore. In IndexedDB this is the dataStore, in WebSQL this is the name of the key/value table in the database. Must be alphanumeric, with underscores. Any non-alphanumeric characters will be converted to underscores.
description (optional)
- Default:
''
A description of the database, essentially for developer usage.
instances
(optional)
- Default:
[]
You can create multiple instances.
More informations on LocalForage documentation
Usage
Get item
let item = await this.$localForage.getItem(key)
Set item
await this.$localForage.setItem(key, value)
Remove item
await this.$localForage.removeItem(key)
Clear
await this.$localForage.clear
Gets the length
let length = await this.$localForage.length
Get the name of a key based on its ID
let k = await this.$localForage.key(keyIndex)
Get the list of all keys
let keys = await this.$localForage.keys()
Force usage of a particular driver or drivers, if available
this.$localForage.setDriver(localforage.LOCALSTORAGE)
By default, localForage selects backend drivers for the datastore in this order:
- IndexedDB
- WebSQL
- localStorage
If you would like to force usage of a particular driver you can use $setStorageDriver() with one or more of the following parameters.
- localforage.INDEXEDDB
- localforage.WEBSQL
- localforage.LOCALSTORAGE
Advanced Usage
You can register multiple instances, see below:
// nuxt.config.js
export default {
buildModules: [
'@nuxtjs/localforage'
],
localforage: {
instances: [{
name: 'myApp',
storeName: 'images'
}, {
name: 'myApp',
storeName: 'fileSystem'
}]
}
}
// for images
await this.$localforage.images.setItem(key, value)
// for fileSystem
await this.$localforage.fileSystem.setItem(key, value)
Development
- Clone this repository
- Install dependnecies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Nuxt Community
<!-- Badges -->