real-time

reactive-storage

This is a storage that uses observer design pattern to call every listener after updating the storage.

Simple example. Using with React JS

npm install real-time --save

import React from "react";
import ReactDOM from "react-dom";
import RStorage from "real-time";
 
class Demo extends React.Component {
    constructor(props){
        super(props);
 
        this.state = {
            updateCounter: 0
        }
 
        this.increment = this.increment.bind(this);
        this.setUsername = this.setUsername.bind(this);
        this.componentWillMount = this.componentWillMount.bind(this);
    }
 
    increment(){
        this.setState({
            updateCounter: this.state.updateCounter + 1
        })
    }
 
    setUsername(event){
        event.preventDefault();
        let value = this.refs.inp.value;
        RStorage.setItem("username", value);
    }
 
    componentWillMount(){
        RStorage.clean(); // if you want to clean localStorage after reloading
        RStorage.subscribe("username", this.increment);
    }
 
    render(){
        let username = RStorage.getItem("username");
 
        return <div>
            <h1>{(username) ? username : "empty value"}</h1>
            <h4>{this.state.updateCounter}</h4>
            <input type="text" onChange={this.setUsername} ref="inp"></input>
            <button onClick={this.setUsername}>Set username</button>
        </div>
    }
}