localStorage 未定义 - 使用角度通用，我有一个使用 localStorage 的函数答案

【问题标题】：localStorage is not defined - using angular universal and I have a function that makes use of localStoragelocalStorage 未定义 - 使用角度通用，我有一个使用 localStorage 的函数
【发布时间】：2017-04-24 14:42:54
【问题描述】：

我在我的应用程序中使用了一个函数，该函数的参数之一是一个对象：

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

但是，我在提供项目时收到的唯一错误是：

ReferenceError: localStorage 未定义在对象。 (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4145:23) 在 webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) 在对象。 (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4119:67) 在 webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) 在对象。 (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1728:69) 在 webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) 在对象。 (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1803:70) 在 webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30) 在对象。 (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1509:79) 在 webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)

如何检查 localStorage 是否存在？

【问题讨论】：

你试过window.localStorage吗？
不，我没有。那么它只是 window.localStorage.getItem 吗？
如果您在服务器上执行此操作，localStorage 将不存在（window 也不存在）。

标签： javascript node.js html angular angular-universal

【解决方案1】：

localstorage 是一个浏览器组件，您尝试在服务器端使用它，您必须确保仅在浏览器端调用 localstorage。

为此，您可以使用角度 isPlatformBrowser 模块。

例子

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

【讨论】：

【解决方案2】：

如果您查看Universal Starter 的文档，您将看到以下部分（作为问题的一部分）：

窗口、文档、导航器和其他浏览器类型 - 不存在于服务器 - 所以使用它们，或任何使用它们的库（jQuery for 示例）将不起作用。

我想这就是您收到此错误的原因。

【讨论】：

没有。如果我理解正确，Universal Starter 用于服务器端渲染。服务器上没有等效的 localStorage。
该死的好吧。我想我会尝试 isNode isBrowser 的东西，看看它是否有效

【解决方案3】：

$scope.$watch 应该可以解决您的问题，理想情况下，当您尝试调用 scop 之外的函数时，您需要添加 $watch 以使其呈现在上面。

【讨论】：

这是 AngularJS 语法，而不是提问者所指的 Angular 2。