indexed-db-utilities

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>indexed-db-utilities</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/css/main.css"> </head> <body> <header> <div class="tsd-page-toolbar"> <div class="container"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="assets/js/search.js" data-base="."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="index.html" class="title">indexed-db-utilities</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> All <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> <input type="checkbox" id="tsd-filter-inherited" checked /> <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label> <input type="checkbox" id="tsd-filter-externals" checked /> <label class="tsd-widget" for="tsd-filter-externals">Externals</label> <input type="checkbox" id="tsd-filter-only-exported" /> <label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container"> <ul class="tsd-breadcrumb"> <li> <a href="globals.html">Globals</a> </li> </ul> <h1> indexed-db-utilities</h1> </div> </div> </header> <div class="container container-main"> <div class="row"> <div class="col-8 col-content"> <div class="tsd-panel tsd-typography"> <h1 id="indexdb-utilities">IndexDB-Utilities</h1> <blockquote> A lightweight utility helper that opens or creates an <code>IndexedDB</code> with <code>objectStores</code> that returns a promise that resolves utility methods. </blockquote> <h2 id="install">Install</h2> <h3 id="npm">NPM</h3> <pre><code class="lang-shell">npm i --save indexed-db-utilities </code></pre> <h3 id="yarn">Yarn</h3> <pre><code class="lang-shell">yarn add indexed-db-utilities </code></pre> <h2 id="how-to-use">How to use</h2> Opening an instance requires a config object. Note: Once the dbName is declared with an instance the keyPath is then tied to it and cannot change without changing the version number. <pre><code class="lang-typescript">const config: { version: Number dbName: String storeNames: String[] keyPath?: String } </code></pre> Call <code>openIDBUtilities(config)</code> to return a promise holding an <code>IDBUtility</code> instance which has utility methods that return a promise. These promises throw a <code>Request.result</code> object on error. <pre><code class="lang-typescript"> const IDBUtility: { add: (storeName: string, value: {}) => Promise<string | Request.result>; put: (storeName: string, value: {}) => Promise<string | Request.result>; update: (storeName: string, keyValue: string, value: {}) => Promise<string | Request.result>; get: (storeName: string, keyValue: string) => Promise<{[keyPath]: string , ...{}} | Request.result>; getAll: (storeName: string) => Promise<{}>; remove: (storeName: string, keyValue: string) => Promise<void | Request.result>; } </code></pre> <h2 id="typescript">TypeScript</h2> <pre><code class="lang-typescript"> import { openIDBUtilities } from 'indexed-db-utilities/dist/utilities/index-db.utility'; async function demo() { /** * * Call openIDBUtilities(config) with config parameters to open an IndexedDB and return a promise that holds * an Object with helper methods, add(), put(), update(), get() and remove(). * if one doesn't exist then it will be made. Note: Once ObjectStores are defined they * IDBs version number and to add more you must provide a new version number. * * The Config Object = { * version: Number * dbName: String * storeNames: String[] * keyPath?: String * } * **/ const stores = await openIDBUtilities({ version: 1, // Numbers should be a positive Number and not contain any decimal digits. dbName: 'DemoIDB-1', storeNames: ['demoStore0', 'demoStore1'], // Provide and array of the storeNames in which you wish to store values in. keyPath: 'myKey' // keyPath is optional, if provided this will be how you get selective values from the stores and must be a property in your object value you wish to store. If omitted the stores will be indexed 0 to (n-1); }); /** * add(storeName: string, value: any) => Promise<string | {}>; * returns a string with the saved value's key or Request.Result Object. * Note: You cannot add new values to objects with keys that already exsist, use put() or update(). */ const addResponse = await stores.add( 'demoStore0', { myKey: 'foo', value: [{ bat: 'squeak'}, {bear: 'grrr'}] }) .catch(err => console.log('Add Error', err)); /** * get(storeName: string, key: string) => Promise<any>; * returns the value stored that matches the value stored in [keyPath]: String * or throws an Request.Result Object */ let getResponse = await stores.get('demoStore0', 'foo'); /** * put(storeName: string, value: any) => Promise<string | {}>; * returns a string with the saved value's key or throws Request.Result Object. * Note: This will overwrite your value saved related your key. */ const putResponse = await stores.put( 'demoStore0', { myKey: 'foo', value: [{ cat: 'meow'}] }); /** * update(storeName: string, key: string, value: any) => Promise<string | {}>; * returns a string with the updated value's key or throws an Request.Result Object. * Note: This will merge with your stored value, if it is an array it will concatenate * the new values. */ const updateResponse = await stores.update( 'demoStore0', 'foo', { myKey: 'foo', value: [{ bat: 'squeak'}, {bear: 'grrr', dog: ['woof', 'bark']}, {cat: 'purr'}, ['happy hacking!']] }); /** * getAll (storeName: string) => Promise<{}> * Returns all values in the store. */ for (let i = 0; i < 10; i++) { await stores.put('demoStore0', { myKey: i.toString(), value: i }) } const getAllResponse = await stores.getAll('demoStore0'); /** * remove(storeName: string, key: string) => Promise<any>; * returns void or throws an Request.Result Object */ const removeResponse = await stores.remove('demoStore0', 'foo') .catch(err => console.log('remove error', err)); // removeResponse undefined } </code></pre> <h2 id="es6">ES6</h2> example <pre><code class="lang-javascript">import { openIDBUtilities } from 'indexed-db-utilities/dist/utilities/index-db.utility'; async function offlineCache() { const cache = await openIDBUtilities({ version: 1, dbName: 'DemoIDB-1', storeNames: ['demoStore0', 'demoStore1'], keyPath: 'myKey' }); cache.add('demoStore1', {myKey: 'foo', bat: 'squeak'}); // addResponse === 'foo' } </code></pre> <h2 id="browser">Browser</h2> Place a <code><script src="/node_modules/indexed-db-utilities/dist/indexed-db-utilities.js"></script></code> inside of your document. Note: This attaches <code>openIDBUtilities()</code> to your window, use ES6's <code>import</code> or TypeScript to avoid the global. example <pre><code class="lang-html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <h1>Demo</h1> <script src="/node_modules/indexed-db-utilities/dist/indexed-db-utilities.js"></script> <script> const stores = openIDBUtilities({ version: 1, dbName: 'DemoIDB-1', storeNames: ['demoStore0', 'demoStore1'], keyPath: 'myKey' }); stores.then(db => { // call helper methods on the resolved object const addResponse = db.add('demoStore1', {myKey: 'foo', bat: 'squeak'}); // addResponse === 'foo' console.log('addResponse', addResponse); }); </script> </body> </html> </code></pre> </div> </div> <div class="col-4 col-menu menu-sticky-wrap menu-highlight"> <nav class="tsd-navigation primary"> <ul> <li class="globals "> <a href="globals.html">Globals</a> </li> <li class="label tsd-is-external"> Internals </li> <li class=" tsd-kind-external-module"> <a href="modules/_indexed_db_utilities_.html">"indexed-db-utilities"</a> </li> <li class="label tsd-is-external"> Externals </li> <li class=" tsd-kind-external-module tsd-is-external"> <a href="modules/_models_config_model_.html">"models/config.model"</a> </li> <li class=" tsd-kind-external-module tsd-is-external"> <a href="modules/_models_idb_utility_model_.html">"models/idb-utility.model"</a> </li> <li class=" tsd-kind-external-module tsd-is-external"> <a href="modules/_utilities_index_db_utility_.html">"utilities/index-db.utility"</a> </li> </ul> </nav> <nav class="tsd-navigation secondary menu-sticky"> <ul class="before-current"> </ul> </nav> </div> </div> </div> <footer class="with-border-bottom"> <div class="container"> <h2>Legend</h2> <div class="tsd-legend-group"> <ul class="tsd-legend"> <li class="tsd-kind-module">Module</li> <li class="tsd-kind-object-literal">Object literal</li> <li class="tsd-kind-variable">Variable</li> <li class="tsd-kind-function">Function</li> <li class="tsd-kind-function tsd-has-type-parameter">Function with type parameter</li> <li class="tsd-kind-index-signature">Index signature</li> <li class="tsd-kind-type-alias">Type alias</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-enum">Enumeration</li> <li class="tsd-kind-enum-member">Enumeration member</li> <li class="tsd-kind-property tsd-parent-kind-enum">Property</li> <li class="tsd-kind-method tsd-parent-kind-enum">Method</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-interface">Interface</li> <li class="tsd-kind-interface tsd-has-type-parameter">Interface with type parameter</li> <li class="tsd-kind-constructor tsd-parent-kind-interface">Constructor</li> <li class="tsd-kind-property tsd-parent-kind-interface">Property</li> <li class="tsd-kind-method tsd-parent-kind-interface">Method</li> <li class="tsd-kind-index-signature tsd-parent-kind-interface">Index signature</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-class">Class</li> <li class="tsd-kind-class tsd-has-type-parameter">Class with type parameter</li> <li class="tsd-kind-constructor tsd-parent-kind-class">Constructor</li> <li class="tsd-kind-property tsd-parent-kind-class">Property</li> <li class="tsd-kind-method tsd-parent-kind-class">Method</li> <li class="tsd-kind-accessor tsd-parent-kind-class">Accessor</li> <li class="tsd-kind-index-signature tsd-parent-kind-class">Index signature</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited">Inherited constructor</li> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited">Inherited property</li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited">Inherited method</li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">Inherited accessor</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected">Protected property</li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected">Protected method</li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected">Protected accessor</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-private">Private property</li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-private">Private method</li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private">Private accessor</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-static">Static property</li> <li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static">Static method</li> </ul> </div> </div> </footer> <div class="container tsd-generator"> Generated using <a href="http://typedoc.org/" target="_blank">TypeDoc</a> </div> <div class="overlay"></div> <script src="assets/js/main.js"></script> <script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script> </body> </html>