I have a function that I am using in my app, and one of the parameters for the function is an object:

const checkValues = {
  promoId: ...,
  ...
  unsaved: !JSON.parse(localStorage.getItem('unsaved')) ? [] : JSON.parse(localStorage.getItem('unsaved'))
}

However, the only error I am receiving when I serve up my project is this:

ReferenceError: localStorage is not defined at Object. (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4145:23) at webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) at Object. (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4119:67) at webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) at Object. (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1728:69) at webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) at Object. (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1803:70) at webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) at Object. (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1509:79) at webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)

How can I check if localStorage exists?

I have a function that I am using in my app, and one of the parameters for the function is an object:

const checkValues = {
  promoId: ...,
  ...
  unsaved: !JSON.parse(localStorage.getItem('unsaved')) ? [] : JSON.parse(localStorage.getItem('unsaved'))
}

However, the only error I am receiving when I serve up my project is this:

ReferenceError: localStorage is not defined at Object. (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4145:23) at webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) at Object. (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4119:67) at webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) at Object. (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1728:69) at webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) at Object. (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1803:70) at webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) at Object. (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1509:79) at webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)

How can I check if localStorage exists?

• javascript
• node.js
• html
• angular
• angular-universal

• Did you try window.localStorage? – gyre Commented Dec 9, 2016 at 7:17
• No I did not. So would it be just window.localStorage.getItem? – user1354934 Commented Dec 9, 2016 at 7:19
• If you're executing this on the server, localStorage won't exist (and neither will window). – gyre Commented Dec 9, 2016 at 7:21

3 Answers 3

localstorage is a browser ponent and you are trying to use that on server side, you will have to make sure that you are calling localstorage when you are on browser side only.

For that you can use angular isPlatformBrowser module.

example

import { isPlatformBrowser } from '@angular/mon';  
constructor(@Inject(PLATFORM_ID) private platformId: any) {}
ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    this.id = localStorage.getItem('id');
  } 
}

If you check the documentation for the Universal Starter you'll the following section (as part of the Gotcha's):

window, document, navigator, and other browser types - do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work.

I suppose that's why you're getting this error.

$scope.$watch Should resolve your issues, Ideally when you are trying to invoke a function which is outside of scop, you need to add $watch to get it rendered on to it.