Angular2 cookie而不是本地存储

Posted 2023-03-10

【中文标题】Angular2 cookie而不是本地存储

【英文标题】：Angular2 cookies instead of localstorage

【发布时间】：2016-02-03 09:35:46

【问题描述】：

我设法让 JWT auth 全部工作，那里没有问题，但它只支持现代浏览器，我需要 Auth 从 IE9 及更高版本开始工作。

我找不到任何关于如何在 Angular2 中使用 cookie 的信息或示例。有一个使用 localStorage 保存令牌的简单示例，我需要相同的功能，但使用 cookie 完成。

任何帮助都会很棒，因为网上没有任何相关内容。

this.http.post("http://localhost:3001/sessions/create", creds,  headers: header )
    .map(res => res.json())
    .subscribe(
      data => localStorage.setItem('id_token',data.id_token),
      err => this.logError(err),
      () => console.log("Auth is completed!")
    );

【参考方案1】：

为了在角度第一次运行npm命令npm install angular2-cookie --save中使用cookie， 在app.module.ts 中注入您的服务后，添加

import  CookieService  from 'angular2-cookie/services/cookies.service';

或在提供者中添加服务，

 providers: [CookieService]

在您使用的组件中添加 cookie 后 Cookie 有 7 种方法 1.)get():- This method returns the value of given cookie key. 2.)getObject() :- This method is returns the desterilized value of given cookie key. 3.)get all():- This method returns a key-value object with all the cookies. 4.)put():- This method is used to set a value for given cookie key. 5.)putObject():- This method is used to serializes and set a value for given cookie key. 6.)remove(): -This method is used to remove given cookie. 7.)remove all(): -This method is used to remove all cookies.

在 cookie 中放置/设置值：this._cookieService.put('key:string', 'value:string'); 此处键为您的 cookie 名称 ex：user1，值用于设置 any value。 获取 cookie 中的值：this._cookieService.get('key'); 从组件中删除 cookie 然后 this._cookieService.remove('key');

【参考方案2】：

解决这个问题的一个简单方法是使用这个库：

https://www.npmjs.com/package/ng2-cookies

要安装这个库，运行：

$ npm install ng2-cookies

用法：

import  Cookie  from 'ng2-cookies/ng2-cookies';

Cookie.set('cookieName', 'cookieValue');
Cookie.set('cookieName', 'cookieValue', 10 /*days from now*/);
Cookie.set('cookieName', 'cookieValue', 10, '/myapp/', 'mydomain.com');

let myCookie = Cookie.get('cookieName');

/*
* List of cookies as Object, like:  cookieName: "cookieValue", cookieName2: "cookieValue2" ... etc 
*/
let cookielist = Cookie.getAll();

Cookie.delete('cookieName');
Cookie.deleteAll();

【讨论】：

虽然理论上这可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。

【参考方案3】：

我使用从 Angular 1 到 Angular 2 的功能实现了 cookie 服务作为可注入服务。还添加了removeAll 功能作为加分项。您可以通过以下方式获得它：

npm install angular2-cookie --save

将其作为服务注入后，您可以使用 Angular 1 中的方法：

this._cookieService.get(key);
this._cookieService.getObject(key);
// Other available methods are
// put(), putObject(), remove() and removeAll()

您可以查看自述文件部分以获取示例和可用功能。

https://github.com/salemdar/angular2-cookie