@nuxtjs/localforage

1.1.0 • Public • Published

@nuxtjs/localforage

npm version npm downloads Circle 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 */ }]
  ]
}

⚠️ 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:

  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

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 or npm install
  • Start development server using npm run dev

License

MIT License

Copyright (c) Nuxt Community

Readme

Keywords

none

Package Sidebar

Install

npm i @nuxtjs/localforage

Weekly Downloads

529

Version

1.1.0

License

MIT

Unpacked Size

8.49 kB

Total Files

6

Last publish

Collaborators

  • damianglowala
  • gugustinette
  • antfu
  • danielroe
  • clarkdo
  • pi0
  • atinux
  • alexchopin
  • ricardogobbosouza