localStorage undefined in rendr controller

Question

Im getting 500 ReferenceError: localStorage is not defined in the controller of my Rendr app. Im trying to fetch my Authorization token from localStorage and set it as a header before I fetch the spec. I've also tried window.localStorage but then I get window is not defined. Do I not have access to the window object in the controller level? If not, how would I fetch from localStorage.

This is my code for the controller.

module.exports = {
  show: function(params, callback) {
    var spec = {
      model: {
        model: 'Company', params: { name: params.id }
      }
    };

    var options = {},
        Authorization = localStorage.getItem('Authorization');

    options.header = {
      "Authorization": Authorization
    }

    this.app.fetch(spec, options, function (err, results) {
      // return if there is an error fetching the user
      if (err) return callback(err);

      // set the title of the page to the users name
      this.app.set('title', results.model.get('name'));

      // render the page with the results from the fetch
      callback(null, results);
    }.bind(this));
  }
};

Answer 1

Welcome to Rendr :-)

Rendr is Isomorphic (or "Universal), which means a lot of it's code runs both on the server AND in the browser. If you have code that you only want to run on the browser there are two ways to make that happen:

1. In the views there is a custom method called postRender - that method is not run on the server, and only runs on the browser. It's the standard place to put all of your browser specific code. The downside is that it is run after the page is rendered.

2. You can wrap the code in if (window !== 'undefined') {...} to ensure that it only runs in a browser. The downside is that it will never run on the server.

In our Rendr app, we do a bit of using localstorage, and kinda have to wedge it into the very top of the base template. It's a bit weird because the concepts of localstorage (the browser has persistence) fight the concepts of isomorpic apps (the server and the browser can be the same). So they don't work together great.