app-storage
Data-pipes and specialized services
App-Storage
These are a set of behaviors and elements that make it easy to synchronize in-memory data to persistant storage systems.
See: Documentation,
AppStorageBehavior
AppStorageBehavior
is an abstract behavior that makes it easy to
synchronize in-memory data and a persistant storage system, such as
the browser's IndexedDB, or a remote database like Firebase.
AppNetworkStatusBehavior
AppNetworkStatusBehavior
tracks the status of whether the browser
is online or offline. True if the browser is online, and false if the browser is
offline matching the HTML browser state spec.
<app-indexeddb-mirror>
app-indexeddb-mirror
is a purpose-built element to easily add read-only
offline access of application data that is typically only available when the
user is connected to the network.
When an app using this element is connected to the network, the element acts as
a pass-through for live application data. Data is bound into the data
property, and consumers of the data can bind to the correlated persistedData
property. As live data changes, app-indexeddb-mirror
caches a copy of the live
data in a local IndexedDB database. When the app is no longer connected to the
network, app-indexeddb-mirror
toggles its persistedData
property to refer
to a read-only copy of the corresponding data in IndexedDB.
This element is particularly useful in cases where an API or storage layer (such as Firebase, for example) does not support caching data for later use during user sessions that begin while the user is disconnected from the network.
<app-localstorage-document>
app-localstorage-document synchronizes storage between an in-memory value and a location in the browser's localStorage system.
localStorage is a simple and widely supported storage API that provides both permanent and session-based storage options. Using app-localstorage-document you can easily integrate localStorage into your app via normal Polymer databinding.
app-localstorage-document is the reference implementation of an element
that uses AppStorageBehavior
. Reading its code is a good way to get
started writing your own storage element.
Usage
Installation
npm install --save @polymer/app-storage
In an html file
<app-indexeddb-mirror>
<html>
<head>
<script type="module">
import '@polymer/polymer/lib/elements/dom-bind.js';
import '@polymer/iron-ajax/iron-ajax.js';
import '@polymer/app-storage/app-indexeddb-mirror/app-indexeddb-mirror.js';
</script>
</head>
<body>
<dom-bind>
<template>
<iron-ajax
url="/api/cats"
handle-as="json"
last-response="{{liveData}}">
</iron-ajax>
<app-indexeddb-mirror
key="cats"
data="{{liveData}}"
persisted-data="{{persistedData}}">
</app-indexeddb-mirror>
<dom-repeat>
<template items="{{persistedData}}" as="cat">
<div>[[cat.name]]</div>
</template>
</dom-repeat>
</template>
</dom-bind>
</body>
</html>
<app-localstorage-document>
<html>
<head>
<script type="module">
import '@polymer/polymer/lib/elements/dom-bind.js';
import '@polymer/paper-input/paper-input.js';
import '@polymer/app-storage/app-localstorage-document/app-localstorage-document.js';
</script>
</head>
<body>
<dom-bind>
<template>
<paper-input value="{{search}}"></paper-input>
<app-localstorage-document key="search" data="{{search}}">
</app-localstorage-document>
</template>
</dom-bind>
</body>
</html>
In a Polymer 3 element
AppStorageBehavior
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {AppStorageBehavior} from '@polymer/app-storage/app-storage-behavior.js';
class SampleElement extends mixinBehaviors([AppStorageBehavior], PolymerElement) {
get isNew() { return /* your override here */ }
get zeroValue() { return /* your override here */ }
get saveValue() { return /* your override here */ }
reset() { /* your optional override here */ }
getStoredValue() { /* your override here */ }
setStoredValue() { /* your override here */ }
}
customElements.define('sample-element', SampleElement);
Polymer.AppNetworkStatusBehavior
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {AppNetworkStatusBehavior} from '@polymer/app-storage/app-network-status-behavior.js';
class SampleElement extends mixinBehaviors([AppNetworkStatusBehavior], PolymerElement) {
alertNetworkStatus() { alert(`I am ${this.online ? 'online' : 'offline'}!`) }
}
customElements.define('sample-element', SampleElement);
<app-indexeddb-mirror>
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-ajax/iron-ajax.js';
import '@polymer/app-storage/app-indexeddb-mirror/app-indexeddb-mirror.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<iron-ajax
url="/api/cats"
handle-as="json"
last-response="{{liveData}}">
</iron-ajax>
<app-indexeddb-mirror
key="cats"
data="{{liveData}}"
persisted-data="{{persistedData}}">
</app-indexeddb-mirror>
<template is="dom-repeat" items="{{persistedData}}" as="cat">
<div>[[cat.name]]</div>
</template>
`;
}
}
customElements.define('sample-element', SampleElement);
<app-localstorage-document>
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-input/paper-input.js';
import '@polymer/app-storage/app-localstorage-document/app-localstorage-document.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<paper-input value="{{search}}"></paper-input>
<app-localstorage-document key="search" data="{{search}}">
</app-localstorage-document>
`;
}
}
customElements.define('sample-element', SampleElement);
Contributing
If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
Installation
git clone https://github.com/PolymerElements/app-storage
cd app-storage
npm install
npm install -g polymer-cli
Running the demo locally
polymer serve --npm
open http://127.0.0.1:<port>/demo/
Running the tests
polymer test --npm
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
- polymer#polymer/polymer#^1.2.0
- firebase#http://www.gstatic.com/firebasejs/staging/3.0.0-eap.5/firebase.js
- Released
- 2016-05-18
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 1.0+
- Polymer 2.0+ in 2.0.0
- Polymer 3.0+ in 3.0.0-pre.1
- Browser
- Browser Independent
app-storage - Vaadin Add-on Directory
Data-pipes and specialized servicesView on GitHub
License
app-storage version 0.9.0
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
* firebase#http://www.gstatic.com/firebasejs/staging/3.0.0-eap.5/firebase.js
app-storage version 0.9.1
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
* firebase#http://www.gstatic.com/firebasejs/staging/3.0.0-eap.5/firebase.js
app-storage version 0.9.2
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 0.9.3
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 0.9.4
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 0.9.5
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 0.9.6
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 0.9.7
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 0.9.8
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 0.10.0
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 0.11.0
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 1.0.0
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 1.0.1
### Dependencies
* promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
* polymer#polymer/polymer#^1.2.0
app-storage version 2.0.0
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
app-storage version 2.0.1
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
app-storage version 2.0.2
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
app-storage version 3.0.0-pre.1
### Dependencies
* @polymer/polymer#^3.0.0-pre.1
app-storage version 3.0.0-pre.2
### Dependencies
* @polymer/polymer#^3.0.0-pre.1
app-storage version 3.0.0-pre.4
### Dependencies
* @polymer/polymer#^3.0.0-pre.4
app-storage version 3.0.0-pre.6
### Dependencies
* @polymer/polymer#^3.0.0-pre.6
app-storage version 3.0.0-pre.7
### Dependencies
* @polymer/polymer#^3.0.0-pre.7
app-storage version 3.0.0-pre.8
### Dependencies
* @polymer/polymer#^3.0.0-pre.7
app-storage version 2.1.0
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
app-storage version 3.0.0-pre.10
### Dependencies
* @polymer/polymer#^3.0.0-pre.10
app-storage version 2.0.4
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
app-storage version 2.1.1
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
app-storage version 3.0.0-pre.11
### Dependencies
* @polymer/polymer#^3.0.0-pre.10
app-storage version 3.0.0-pre.12
### Dependencies
* @polymer/polymer#3.0.0-pre.12
app-storage version 3.0.0-pre.13
### Dependencies
* @polymer/polymer#^3.0.0-pre.13
app-storage version 3.0.0-pre.14
### Dependencies
* @polymer/polymer#^3.0.0-pre.13
app-storage version 3.0.0-pre.15
### Dependencies
* @polymer/polymer#^3.0.0-pre.13
app-storage version 3.0.0-pre.16
### Dependencies
* @polymer/polymer#^3.0.0-pre.13
app-storage version 3.0.0-pre.17
### Dependencies
* @polymer/polymer#^3.0.0-pre.13
app-storage version 3.0.0-pre.18
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 3.0.0-pre.19
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 2.1.2
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
app-storage version 3.0.0-pre.20
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 3.0.0-pre.21
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 3.0.0-pre.22
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 3.0.0-pre.23
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 3.0.0-pre.24
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 3.0.0-pre.25
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 3.0.0-pre.26
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 3.0.0
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 3.0.1
### Dependencies
* @polymer/polymer#^3.0.0
app-storage version 3.0.2
### Dependencies
* @polymer/polymer#^3.0.0