Use any implementation of W3C WebStorage API directly as a React/Flux-style store.
var WebStorage = require('react-webstorage')
, dispatcher = require('./path/to/app-dispatcher')
;
var webStorage = new WebStorage(window.localStorage ||
window.sessionStorage /* or poly-fill thereof */
);
dispatcher.register(function (payload) {
switch (payload.actionType) {
case 'A':
webStorage.setItem(payload.key, payload.item);
break;
case 'B':
webStorage.removeItem(payload.key);
break;
case 'C':
webStorage.clear();
break;
default:
return;
}
});
// Later, inside a component...
getInitialState: function () {
return {
foo: webStorage.getItem('foo');
};
},
updateState: function () {
this.setState({
foo: webStorage.getItem('foo')
});
},
componentDidMount: function () {
webStorage.addListener('change', this.updateState);
},
componentWillUnmount: function () {
webStorage.removeListener('change', this.updateState);
}
WebStorage Instance implements the WebStorage API, and in cases where the contents of WebStorage is modified (setItem, removeItem, clear) fires a change
event to registered listeners.
WebStorage API details here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API