title: localStorage retrieval / getItem is returning null
body: <p>I have added a theme switcher to my app that allows me to change theme/variable.scss files via the interface through a on/off switch.</p>
  
  <p>On refresh/navigation I want the users preference to be remembered. I have setItem to local storage and that's showing up in my browsers local storage. </p>
  
  <p>Next, I want to retrieve that choice, if there is local storage available, otherwise keep default theme set.</p>
  
  <p>AppComponent.ts</p>
  
  <pre><code>export class AppComponent implements OnInit {
    currentTheme: string;
    constructor( @Inject(DOCUMENT) private document) {
    }
  
  
    ngOnInit() {
      if (localStorage.length &gt; 0) {
        this.currentTheme = JSON.parse(localStorage.getItem(localStorage.localTheme));
      } else {
        this.currentTheme = 'Standard contrast';
        this.document.getElementById('theme').className = 'standard-theme';
      }
    }
  
    handleThemeChange(event) {
      if (this.currentTheme === 'Standard contrast') {
      this.document.getElementById('theme').className = 'high-contrast-theme';
        this.currentTheme = 'High contrast mode';
      } else {
      this.document.getElementById('theme').className = 'standard-theme';
        this.currentTheme = 'Standard contrast';
      }
      localStorage.setItem('localTheme', this.currentTheme);
    }
  
  }
  </code></pre>
  
  <p><code>localStorage.localTheme</code> returns 'Standard contrast' or 'High contrast mode' as expected - I need this to then update <code>currentTheme</code> so the users choice remains on refresh - but when I debug this comes as <code>null</code></p>
  
  <p>UPDATE:</p>
  
  <pre><code>this.currentTheme = JSON.parse(localStorage.getItem(localStorage.localTheme));
  </code></pre>
  
  <p>This line seems to be the issue, although <code>(localStorage.localTheme)</code> returns value <code>this.currentTheme</code> = null ?</p>
  
  <p>A little help would be appreciated! Thanks</p>