Home

Awesome

@nuxtjs/localforage

npm version npm downloads Github Actions CI Codecov License

Localforage module for Nuxt.js

📖 Release Notes

Setup

  1. Add @nuxtjs/localforage dependency to your project
yarn add --dev @nuxtjs/localforage # or npm install --save-dev @nuxtjs/localforage
  1. Add @nuxtjs/localforage to the buildModules section of nuxt.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)

The preferred driver(s) to use. Same format as what is passed to setStorageDriver(), above.

name (optional)

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)

The version of your database. May be used for upgrades in the future; currently unused.

size (optional)

The size of the database in bytes. Used only in WebSQL for now.

storeName (optional)

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)

A description of the database, essentially for developer usage.

instances (optional)

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:

  1. IndexedDB
  2. WebSQL
  3. localStorage

If you would like to force usage of a particular driver you can use $setStorageDriver() with one or more of the following parameters.

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

License

MIT License

Copyright (c) Nuxt Community

<!-- Badges -->