react-webstorage

Use webStorage or webStorage poly-fill as a React/Flux store.

Usage no npm install needed!

<script type="module">
  import reactWebstorage from 'https://cdn.skypack.dev/react-webstorage';
</script>

README

react-webstorage

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