ember-local-storage-proxy
Advanced tools
Comparing version
{ | ||
"name": "ember-local-storage-proxy", | ||
"version": "0.0.1", | ||
"version": "0.1.0", | ||
"description": "Library for wrapping HTML5 local storage values as Ember properties.", | ||
@@ -5,0 +5,0 @@ "directories": { |
@@ -1,26 +0,84 @@ | ||
# Ember-local-storage-proxy | ||
# ember-local-storage-proxy | ||
This README outlines the details of collaborating on this Ember addon. | ||
**ember-local-storage-proxy** is a library for wrapping HTML5 local storage or | ||
session storage values as Ember properties. It is available as an Ember CLI | ||
addon. | ||
## Installation | ||
* `git clone` this repository | ||
* `npm install` | ||
* `bower install` | ||
``` | ||
ember install ember-local-storage-proxy | ||
``` | ||
## Running | ||
## Usage | ||
* `ember server` | ||
* Visit your app at http://localhost:4200. | ||
The `ember-local-storage-proxy` module exports the following: | ||
## Running Tests | ||
- `isLocalStorageSupported`, `isSessionStorageSupported`: Boolean consts that | ||
represent whether the current browser supports each type of storage. | ||
* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions) | ||
* `ember test` | ||
* `ember test --server` | ||
- `localStorageProperty(name, defaultValue)`, `sessionStorageProperty(name, | ||
defaultValue)`: Returns an Ember computed property that is synced with a | ||
key-value pair in local / session storage. | ||
## Building | ||
In any Ember object (e.g., service, component, controller, or route), use | ||
`localStorageProperty` or `sessionStorageProperty` to define a synced property | ||
like this: | ||
* `ember build` | ||
```javascript | ||
// services/settings.js | ||
For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/). | ||
import Ember from 'ember'; | ||
import { | ||
localStorageProperty, | ||
sessionStorageProperty | ||
} from 'ember-local-storage-proxy'; | ||
export default Ember.Service.extend({ | ||
enableFoo: Ember.computed(localStorageProperty('enableFoo', false)), | ||
userId: Ember.computed(sessionStorageProperty('userId')), | ||
toggleFoo() { | ||
// This will read and write window.localStorage.enableFoo transparently. | ||
this.set('enableFoo', !this.get('enableFoo')); | ||
}, | ||
// This will be fired when enableFoo is updated, as expected. | ||
onFooChanged: Ember.observer('enableFoo', function() { | ||
console.log( | ||
'Foo is now %s', | ||
this.get('enableFoo') ? 'enabled' : 'disabled'); | ||
}) | ||
}); | ||
``` | ||
To use the synced property in, e.g., a component: | ||
```javascript | ||
// components/my-component/component.js | ||
import Ember from 'ember'; | ||
export default Ember.Component.extend({ | ||
settings: Ember.inject.service(), | ||
// You can also define an alias: | ||
enableFoo: Ember.computed.alias('settings.enableFoo') | ||
}); | ||
``` | ||
```handlebars | ||
<!-- components/my-component/template.hbs --> | ||
{{#if enableFoo}}...{{/if}} | ||
``` | ||
Note, however, that Ember cannot detect direct changes to the underlying local / | ||
session storage value. In other words, if your code directly sets | ||
`window.localStorage.enableFoo = true` instead of using `set('enableFoo', | ||
true)`, a subsequent `get('enableFoo')` will still return the old value `false`, | ||
and any observers will fail to fire. As a result, you should always access or | ||
update the value through the synced property defined via `localStorageProperty` | ||
and `sessionStorageProperty`. | ||
## Compatibility | ||
Although [browser support for HTML5 local | ||
storage](http://caniuse.com/#feat=namevalue-storage) is pretty much universal at | ||
this point, `ember-local-storage-proxy` will stub out `window.localStorage` and | ||
`window.sessionStorage` with an empty object in the rare case that they're not | ||
supported. In such cases, all the computed properties defined with | ||
`localStorageProperty` / `sessionStorageProperty` can be read from and written | ||
to as normal, except that the values will not be persisted. |
10573
89.89%8
14.29%95
106.52%85
214.81%