title: Sync React.component state with local storage
body: <p>I am trying to create a function that would grab the state of a component from local storage if it exists (if it has been saved before).     It would be a function that could be used by all the components, something like:</p>
  
  <pre><code>    // my util function 
      myFunction = (componentUniqueIdentifier, componentState) =&gt; {
  
      // for all the keys found in componentState, try to find in local storage if localStorage[componentUniqueIdentifier][key] exists. if it exists, override value.
  
  
  if(localStorage.getItem(key)) { componentState[key] = localStorage.getItem(key); }
  
  return componentState;
  
      }
  </code></pre>
  
  <p>and more importantly:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Test extends Component {
  
      state = {
        thisIsAKey: ''
      }
  
      render() {
  
          console.log(this.state.thisIsAKey); // this shows value coming from local storage if found
  
          return (
              &lt;div&gt;&lt;/div&gt;
          );
      }
  
  }
  
  export default Test;
  </code></pre>
  
  <p>So obviously it wont be that simple and I will probs have to change a few things, but the idea would be to create this function that would sync the state of ALL the components with local storage, so I dont have to write this logic again when building a new component.</p>
  
  <p>So far I havent been able to come up with any good idea... I have been looking into mixins or creating a HOC that all my components would extends but is it a good way to go?</p>
  
  <p>Thanks! </p>