从 Angular2 访问 HTML5 本地存储

Posted 2023-03-05

【中文标题】从 Angular2 访问 HTML5 本地存储

【英文标题】：Access HTML5 local storage from Angular2

【发布时间】：2017-01-09 02:37:44

【问题描述】：

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

我对这部分有疑问：

import localStorage from 'localStorage';

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

【问题讨论】：

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

【参考方案1】：

您可以在不使用import localStorage from 'localStorage'; 的情况下直接在您的服务中使用localStorage。

【讨论】：

听起来很棒。比我猜这个 import localStorage 在教程中是不必要的而且只是一个错误？

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

@ranakrunal9 测试结果如何？效果好吗？

另一种方法是引入存储接口和单元测试，我猜是模拟实现。

【参考方案2】：

你应该直接使用localStorage，正如这里其他提到的，它是一个内置的浏览器功能（supported browser）。

此外，我在下面添加了几个关于如何在其中添加条目的示例（它们的工作方式相同）。

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

请注意，angular2-localstorage 在本机 localStorage 之上工作，并提供一种“方便”的方式来自动保存和恢复指令中的变量状态。

【讨论】：

您是如何使用 typescript 管理错误处理的？ '找不到名称'localStorage'。

【参考方案3】：

我注意到本地存储项目正在寻求某人接管，并且目前没有维护。所以在那之前我不会使用它。我能够在我的 tsconfig.json 文件中找到修复程序。

在属性库中你可以简单地添加 dom

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

编译器选项https://www.typescriptlang.org/docs/handbook/compiler-options.html支持此功能。

为此，我必须重新启动 Visual Studio 代码才能消除错误。