从Angular2访问HTML5本地存储

Question

我正在遵循这个教程：https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492，关于Angular2中的身份验证。

我有一个问题出现在这部分：

import localStorage from 'localStorage';

我在其他地方读到应该使用这个库https://github.com/marcj/angular2-localstorage来访问HTML5中的本地存储。它是唯一的选择吗？是否可以在不使用额外模块的情况下从Angular2访问HTML5本地存储？

- Daniel Stradowski

---

你不需要导入任何东西，localStorage是浏览器内置功能之一，它是lib.d.ts的一部分。 - Nitzan Tomer

Answer 1

您可以在服务中直接使用localStorage，无需import localStorage from 'localStorage';。

- ranakrunal9

---

听起来很棒。那么我猜这个导入localStorage在教程中是不必要的，只是一个错误？ - Daniel Stradowski

是的，我已经在我的一个服务中直接使用了 localStorage。 - ranakrunal9

@ranakrunal9，测试结果如何？它工作正常吗？ - stijn.aerts

另一种选择是引入存储接口并使用模拟实现进行单元测试，我想。 - mark.sagikazar

Answer 2

如其他人所述，您应直接使用内置于浏览器中的 localStorage 功能（支持的浏览器），以下是一些示例说明如何在其中添加条目（它们使用相同的方式）。

localStorage.colorSetting = '#a4509b';    // dot notation
localStorage['colorSetting'] = '#a4509b'; // bracket notation
localStorage.setItem('colorSetting', '#a4509b');

作为一条注释，angular2-localstorage 基于本地的 localStorage 并提供了一种“方便”的方式来在指令中自动保存和恢复变量状态。

- GibboK

---

你是如何在 TypeScript 中处理错误的？“无法找到名称'localStorage'”。 - Winnemucca

Answer 3

我注意到本地存储项目正在寻找接手人，目前没有得到维护。所以在那之前我不会使用它。我已经在我的 tsconfig.json 文件中找到了解决方法。

在 lib 属性中，你可以简单地添加 dom。

"lib": [
      "es2016",
      "dom"
    ]

这在编译器选项https://www.typescriptlang.org/docs/handbook/compiler-options.html中得到支持。

我不得不重新启动Visual Studio Code才能消除这些错误。

- Winnemucca