Angular 6 中 AngularJS 的 ngcookie 等价于啥？ [关闭]

Posted 2023-03-08

【中文标题】Angular 6 中 AngularJS 的 ngcookie 等价于啥？ [关闭]

【英文标题】：What is the equivalent to AngularJS's ngcookie in Angular 6? [closed]Angular 6 中 AngularJS 的 ngcookie 等价于什么？ [关闭]

【发布时间】：2018-11-19 05:11:46

【问题描述】：

如何在 Angular 6 中创建 cookie？对于 AngularJS，有 ngcookie。在 Angular 6 中创建 cookie 的等效方法是什么？

【问题讨论】：

我有点困惑为什么这个问题被关闭了。这是一个有效、简洁的问题，很多人都以完全有效的答案投票赞成。这里的改装有时感觉有点像没有被告知战争已经结束的狙击手。刚从树上下来，伙计们

@PeterNixey 很多人投票/回答并不一定意味着问题本身是好的。保持这种开放的问题会向新用户发送一条信息，即诸如“我如何做 X”之类的不集中的问题，而不显示自我研究或尝试的解决方案是可以的，并且是主题。很多人通过限速，但这并不意味着超速。

@remy 这很合理，但我不明白这个问题是如何超出速度限制的。它非常具体 - 它指的是 AngularJS 中的一个特定实用程序，并询问 Angular 6 中的等价物。我最初的问题有点轻率，但我真的不明白这是怎么回事

@PeterNixey 我可以看到你的观点，喜欢“不专注”不是正确的关闭原因，并且同意（它确实是具体的）。但是，由于我们（普通用户）无法更改关闭的原因，因此出于上述原因，我仍然投票决定保持关闭状态。 （我个人可能会选择“需要调试细节”，因为在询问之前似乎没有努力解决它）。但我认为你提出的观点肯定是有道理的。

【参考方案1】：

你可以使用这个节点包

ngx-cookie-service

【讨论】：

在 Angular 中，您可以简单地使用本地存储，而不是像 localStorage.setItem(key,value);

您可以这样做，但是如果您希望该值存储 10 分钟然后消失呢？本地存储不会这样做。

【参考方案2】：

npm install ngx-cookie-service --save 添加到您的模块：import CookieService from 'ngx-cookie-service'; 将CookieService 添加到模块的提供程序。 将其注入到您的构造函数中。 使用cookie.get(nameOfCookie) 获取特定cookie， 使用 cookie.set(nameOfCookie,cookieValue) 添加新的 cookie。

【讨论】：

我相信你忘了提到将它添加到应用程序模块中。在您的@NgModule 中将其添加为提供者providers: [ CookieService ]

[ts] 找不到模块“ngx-cookie-service”。 [2307] 我尝试 npm i 然后离子服务然后发生错误

@CodeWarrior 从 Angular 5（或 6）开始，您无需在提供程序中添加服务

@ManosKounelakis 是的，伙计，我发表此评论时使用的是 Angular 4。

【参考方案3】：

首先，你应该问自己：“我真的需要 cookie 吗？”：

Cookie 曾经用于一般客户端存储。虽然这是 当它们是在客户端上存储数据的唯一方式时，它们是合法的，它 现在推荐使用现代存储 API。饼干是 随每个请求一起发送，因此它们可能会降低性能（尤其是 用于移动数据连接）。用于客户端存储的现代 API 是 Web 存储 API（localStorage 和 sessionStorage）和 IndexedDB。 (Source: MDN)

因此，如果您还没有阅读过 Web Storage API，则可能需要阅读。

如果您确实想继续使用 Cookie，请继续阅读。

我尝试了ngx-cookie-service，但它对我不起作用。我有一个又一个问题，最后在 github 上讨论它，尝试更新包。我花了大约一天的时间才意识到我需要的东西不必那么复杂，毕竟获取/设置 cookie 只是一个原生 javascript 的事情。

我没有更多的时间可以浪费，我自己写了这个简单的CookieService。我只是想与其他绝望的开发人员分享它。 :)

一个简单的 CookieService

我创建了这个 gist ，它是 ngx-cookie-service 的轻量级替代品。

设置和使用

当然，您需要在您的app.module.ts 文件中注册它。 将其添加到您的提供商列表中：

providers: [FooService, BarService, CookieService]

接下来，在您的组件中使用它，例如如下：

private _sessionId: string;

constructor(private cookieService: CookieService) 
  this._sessionId = cookieService.get("sessionId");


public set sessionId(value: string) 
  this._sessionId = value;
  this.cookieService.set("sessionId", value);

请注意，您可以使用调试工具来验证 cookie 是否已实际设置，并验证它是否存在于后续 HTTP 请求中。 （Chrome 的截图，但 Firefox 和 Edge 有类似的概述）

【讨论】：

我尝试使用它来获取 cookie 的值，但得到的值不正确。通过withCredentials: true 在获取请求中设置了正确的cookie。我想要 cookie 的值，所以我可以在 post 请求的标头中发送它。我知道我正在发送通过 withCredentials 自动设置的正确 cookie，但我需要发送带有 cookie 值的标头。

@dannygonzalez 我假设你已经用你的浏览器调试工具检查了它。但如果你没有，我添加了一些你可以如何仔细检查的截图。 - 不确定这是否对你有帮助。

谢谢。就我而言，我想读取我认为无法读取的初始页面请求的 HTTP 响应标头 (***.com/questions/58950016/…)。我打算发送一个 Cookie，使用document.cookies 在应用程序中读取它。我想我不能使用localStorage 或sessionStorage 来做到这一点，因为我仍然需要发送我想要存储为cookie 的值。不是吗？

请不要将 Localstorage 用于会话令牌等敏感数据 - 它可以通过简单的跨站点脚本攻击被盗。 Cookie 可以适用于此，这要归功于 HTTP-Only 标志，但只能通过 Cookie 标头设置。

我个人认为这个问题已经达成了很好的共识；如果你用谷歌搜索“使用本地存储来获取令牌”，那么每一个结果都表明这是一个坏主意。但是，这并不会使您的答案无效..来自 Angular，使用 HTTPOnly cookie 不是一种选择 - 这些不能由 Javascript 读取或写入。所以在这种情况下仍然没有理由在 LocalStorage 上使用 cookie。因此，我的评论与您的​​回答并不矛盾，而是一些补充它的建议。

【参考方案4】：

现在是：npm install ngx-cookie --save

文档： https://github.com/salemdar/ngx-cookie

【讨论】：

包含链接很好，但请分享步骤以使答案更有用