title: JSON.parse( localStorage.getItem('priceSlider')).start , Unexpected end of JSON input
body: <p>I am using Localstorage.getItem tocreate a RangeSlider with dynamic defaultSelected Values. I am using the rangeSlider inside a react-modal so I need when the user open the model and use the range slider to create a filter, the state is saved in LocalStorage and when the user open the modal again he get the rangeSlider with the last values he selected in the start and end Here is my code:</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.onPriceValueChange = this.onPriceValueChange.bind(this);   
      localStorage.setItem('priceSlider','');
    }
  
   onPriceValueChange(value){
      console.log("value:",value)
      console.log("value.start:",value.start)
      localStorage.setItem('priceSlider', JSON.stringify(value));  
      console.log("localStorageonPrice:",localStorage)   
      var obj = JSON.parse(localStorage.getItem('priceSlider'));
      console.log("OBJ:",obj);
      console.log("start:",JSON.parse(localStorage.getItem('priceSlider')).start);
      console.log("end:",JSON.parse(localStorage.getItem('priceSlider')).end);
    }
  &lt;Modal
         isOpen={this.props.PriceModalIsOpen}
         onHide={this.handleHide}
         contentLabel="Prix Modal"
   &gt;
   &lt;RangeSlider
      title="40000-80000"
      componentId="priceSlider"
      className="priceRangeSlider"
      dataField="price.keyword"
      range={{
       start: 0,
       end: 100000
      }}
      defaultSelected={{
       start: 20000,
       end: 50000
      }}
      rangeLabels={{
       start: "40",
       end: "80"
     }}                                      
      URLParams={false}
      onValueChange={this.onPriceValueChange}
      /&gt;
  &lt;/Modal&gt;
  </code></pre>
  
  <p>When I test with a static value for the defaultSelected like this</p>
  
  <pre><code>defaultSelected={{
                  start: 20000,
                  end: 50000
                }}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/agBXZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/agBXZ.jpg" alt="enter image description here"></a></p>
  
  <p>The console.log() shows: </p>
  
  <p><a href="https://i.stack.imgur.com/OeT0e.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OeT0e.jpg" alt="enter image description here"></a></p>
  
  <p>but when I want to have the values chosen by the user when he closed the Modal
  I tied with this: </p>
  
  <pre><code>defaultSelected={{
       start: JSON.parse(localStorage.getItem('priceSlider')).start,
       end: JSON.parse(localStorage.getItem('priceSlider')).end
      }}
  </code></pre>
  
  <p>But I get this error: </p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Unexpected end of JSON input<br>
    at JSON.parse ()<br>
    at ProxyComponent.render (PriceFilterModal.js:91)<br>
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:620)<br>
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:635)<br>
    at finishClassComponent (react-dom.development.js:13194)<br>
    at updateClassComponent (react-dom.development.js:13156)<br>
    at beginWork (react-dom.development.js:13825)<br>
    at performUnitOfWork (react-dom.development.js:15864)<br>
    at workLoop (react-dom.development.js:15903)<br>
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)<br>
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)<br>
    at invokeGuardedCallback (react-dom.development.js:187)<br>
    at replayUnitOfWork (react-dom.development.js:15311)<br>
    at renderRoot (react-dom.development.js:15963)<br>
    at performWorkOnRoot (react-dom.development.js:16561)<br>
    at performWork (react-dom.development.js:16483)<br>
    at performSyncWork (react-dom.development.js:16455)<br>
    at requestWork (react-dom.development.js:16355)<br>
    at scheduleWork$1 (react-dom.development.js:16219)<br>
    at scheduleRootUpdate (react-dom.development.js:16786)<br>
    at updateContainerAtExpirationTime (react-dom.development.js:16813)<br>
    at updateContainer (react-dom.development.js:16840)<br>
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17123)<br>
    at react-dom.development.js:17263<br>
    at unbatchedUpdates (react-dom.development.js:16680)<br>
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:17259)<br>
    at render (react-dom.development.js:17318)<br>
    at renderApp (index.js:11)<br>
    at Object. (index.js:19)<br>
    at Object../src/index.js (index.js:10)<br>
    at <strong>webpack_require</strong> (bootstrap c230f6f2604486566c3b:678)<br>
    at fn (bootstrap c230f6f2604486566c3b:88)<br>
    at Object.0 (index.less?83e0:26)<br>
    at <strong>webpack_require</strong> (bootstrap c230f6f2604486566c3b:678)<br>
    at bootstrap c230f6f2604486566c3b:724<br>
    at bootstrap c230f6f2604486566c3b:724  </p>
    
    <p>render @ PriceFilterModal.js:91<br>
    hotComponentRender @ react-hot-loader.development.js:620<br>
    proxiedRender @ react-hot-loader.development.js:635<br>
    finishClassComponent @ react-dom.development.js:13194<br>
    updateClassComponent @ react-dom.development.js:13156<br>
    beginWork @ react-dom.development.js:13825<br>
    performUnitOfWork @ react-dom.development.js:15864<br>
        workLoop @ react-dom.development.js:15903
        callCallback @ react-dom.development.js:100
        invokeGuardedCallbackDev @ react-dom.development.js:138
        invokeGuardedCallback @ react-dom.development.js:187
        replayUnitOfWork @ react-dom.development.js:15311
        renderRoot @ react-dom.development.js:15963
        performWorkOnRoot @ react-dom.development.js:16561
        performWork @ react-dom.development.js:16483
        performSyncWork @ react-dom.development.js:16455
        requestWork @ react-dom.development.js:16355
        scheduleWork$1 @ react-dom.development.js:16219
        scheduleRootUpdate @ react-dom.development.js:16786
        updateContainerAtExpirationTime @ react-dom.development.js:16813
        updateContainer @ react-dom.development.js:16840
        ./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17123
        (anonymous) @ react-dom.development.js:17263
        unbatchedUpdates @ react-dom.development.js:16680
        legacyRenderSubtreeIntoContainer @ react-dom.development.js:17259
        render @ react-dom.development.js:17318
        renderApp @ index.js:11
        (anonymous) @ index.js:19
        ./src/index.js @ index.js:10
        <strong>webpack_require</strong> @ bootstrap c230f6f2604486566c3b:678
        fn @ bootstrap c230f6f2604486566c3b:88
        0 @ index.less?83e0:26
        <strong>webpack_require</strong> @ bootstrap c230f6f2604486566c3b:678
        (anonymous) @ bootstrap c230f6f2604486566c3b:724
        (anonymous) @ bootstrap c230f6f2604486566c3b:724
        index.js:2178 The above error occurred in the  component:
            in PriceFilterModal (created by Connect(PriceFilterModal))
            in Connect(PriceFilterModal) (at DefaultPage.js:36)
            in div (at DefaultPage.js:31)
            in DefaultPage (created by Connect(DefaultPage))
            in Connect(DefaultPage) (created by Route)
            in Route (at Root.js:32)
            in Switch (at Root.js:41)
            in div (at App.js:33)
            in div (created by Styled(div))
            in Styled(div) (created by URLParamsProvider)
            in URLParamsProvider (created by Connect(URLParamsProvider))
            in Connect(URLParamsProvider) (created by ReactiveBase)
            in Provider (created by ReactiveBase)
            in ThemeProvider (created by ReactiveBase)
            in ReactiveBase (at App.js:29)
            in div (at App.js:27)
            in App (at Root.js:27)
            in Route (at Root.js:25)
            in Switch (created by Root)
            in Router (created by ConnectedRouter)
            in ConnectedRouter (created by Root)
            in Provider (at Root.js:52)
            in Root
            in AppContainer (at index.js:12)</p>
  </blockquote>
  
  <pre><code>React will try to recreate this component tree from scratch using the error boundary you provided, ReactiveBase.
  __stack_frame_overlay_proxy_console__ @ index.js:2178
  logCapturedError @ react-dom.development.js:14227
  logError @ react-dom.development.js:14266
  callback @ react-dom.development.js:14948
  callCallback @ react-dom.development.js:10879
  commitUpdateQueue @ react-dom.development.js:10923
  commitLifeCycles @ react-dom.development.js:14378
  commitAllLifeCycles @ react-dom.development.js:15463
  callCallback @ react-dom.development.js:100
  invokeGuardedCallbackDev @ react-dom.development.js:138
  invokeGuardedCallback @ react-dom.development.js:187
  commitRoot @ react-dom.development.js:15604
  completeRoot @ react-dom.development.js:16619
  performWorkOnRoot @ react-dom.development.js:16564
  performWork @ react-dom.development.js:16483
  performSyncWork @ react-dom.development.js:16455
  requestWork @ react-dom.development.js:16355
  scheduleWork$1 @ react-dom.development.js:16219
  scheduleRootUpdate @ react-dom.development.js:16786
  updateContainerAtExpirationTime @ react-dom.development.js:16813
  updateContainer @ react-dom.development.js:16840
  ./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17123
  (anonymous) @ react-dom.development.js:17263
  unbatchedUpdates @ react-dom.development.js:16680
  legacyRenderSubtreeIntoContainer @ react-dom.development.js:17259
  render @ react-dom.development.js:17318
  renderApp @ index.js:11
  (anonymous) @ index.js:19
  ./src/index.js @ index.js:10
  __webpack_require__ @ bootstrap c230f6f2604486566c3b:678
  fn @ bootstrap c230f6f2604486566c3b:88
  0 @ index.less?83e0:26
  __webpack_require__ @ bootstrap c230f6f2604486566c3b:678
  (anonymous) @ bootstrap c230f6f2604486566c3b:724
  (anonymous) @ bootstrap c230f6f2604486566c3b:724
  index.js:2178 An error has occured. You're using Reactivesearch Version: 2.8.1. If you think this is a problem with Reactivesearch, please try updating to the latest version. If you're already at the latest version, please open an issue at https://github.com/appbaseio/reactivesearch/issues
  </code></pre>
  
  <p>With Firefox I get: </p>
  
  <blockquote>
    <p>SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/CkOKJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CkOKJ.jpg" alt="enter image description here"></a></p>