https://github.com/sterpe/react-webstorage

Use webStorage or a webStorage polyfill as a React store
https://github.com/sterpe/react-webstorage

Last synced: about 2 months ago
JSON representation

Use webStorage or a webStorage polyfill as a React store

• Host: GitHub
• URL: https://github.com/sterpe/react-webstorage
• Owner: sterpe
• Created: 2014-12-24T09:07:16.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2014-12-24T23:14:55.000Z (about 10 years ago)
• Last Synced: 2024-10-13T16:32:44.534Z (3 months ago)
• Language: JavaScript
• Size: 152 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-web-storage - react-webstorage - Use webStorage or a webStorage polyfill as a React store (awesome-web-storage [](https://github.com/sindresorhus/awesome) / Different Storage APIs)

README

        
react-webstorage

===

Use any implementation of W3C WebStorage API directly as a React/Flux-style store.

````javascript

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