localforage-nuxt

Notes

This package is just a replacement for official package @nuxtjs/localforage, because the official package had not been updated recently and also there's a typo error in plugin.js. The changes included two:

• Add getItemSync and setItemSync for Synchronize method call
• Update the localforage dependency to latest version 1.7.3
• Fix the typo error in plugin.js for setDriver method
• Inject the $localForage instance into nuxtjs context object

Setup

• Add localforage-nuxt dependency using yarn or npm to your project
• Add localforage-nuxt to modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    'localforage-nuxt'
 ]
}

Options

nuxt.config.js

{
  // You can pass options in modules
  modules: [
    // With options
    ['localforage-nuxt', {
      driver      : localforage.WEBSQL, // Force WebSQL; same as using setDriver()
      name        : 'myApp',
      version     : 1.0,
      size        : 4980736, // Size of database, in bytes. WebSQL-only for now.
      storeName   : 'keyvaluepairs', // Should be alphanumeric, with underscores.
      description : 'some description'
    }],
  ],
  // OR localforage object
  localforage: {
    driver      : localforage.WEBSQL, // Force WebSQL; same as using setDriver()
    name        : 'myApp',
    version     : 1.0,
    size        : 4980736, // Size of database, in bytes. WebSQL-only for now.
    storeName   : 'keyvaluepairs', // Should be alphanumeric, with underscores.
    description : 'some description'
  }
}

driver

The preferred driver(s) to use. Same format as what is passed to setStorageDriver(), above. Default: [localforage.INDEXEDDB, localforage.WEBSQL, localforage.LOCALSTORAGE]

name

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. Default: 'localforage'

size

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

storeName

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. Default: 'keyvaluepairs'

version

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

description

A description of the database, essentially for developer usage. Default: ''

More informations on LocalForage documentation

Usage

Get item

let item = await this.$localForage.getItem(key)

Get item Synchronize

let item = this.$localForage.getItemSync(key)

Set item

await this.$localForage.setItem(key, value)

Set item Synchronize

this.$localForage.setItemSync(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.

localforage.INDEXEDDB

localforage.WEBSQL

localforage.LOCALSTORAGE

Development

• Clone this repository
• Install dependnecies using yarn install or npm install
• Start development server using npm run dev

License

MIT License