Angular2 cookie保存用户信息

作者: zhaochenxi 分类: angular2,前端 发布时间: 2017-02-23 22:22

作为一个客户端,我们肯定会需要保存用户的关键信息,比如说用户ID等信息,如果每次使用浏览器cookie去服务器端获取也是可以的,但是没有必要,我们可以直接将cookie直接写在浏览器的cookie中,每次从浏览器中获取即可。Angular2中没有提供自己的cookie类,把官网的文档找了个遍都没有找到,确认没有,于是想着自己试着实现,一点头绪都没有,试了试用静态(static)变量,但是每次刷新之后就没有了。于是不断google,终于找到了一个开源的ng2-cookies.

通过使用它终于实现了把用户信息写在了浏览器cookie中。

项目地址,但是该网站中的文档有点问题,可能是我的angular2版本问题吧,实际项目中需要做些修改,我是按照如下步骤来做的,以下使用方法和npmjs这个网站上提供的不同之处在于我在我的angular2的工程目录下没有找到src/system-config.ts和./angular-cli-build.js。。

1.安装
npm install ng2-cookies

2.配置

在system-config.js中添加:

map: {
      // our app is within the app folder
      app: 'app',
      //.........
      'ng2-cookies':'npm:ng2-cookies'
    }

packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      'ng2-cookies': {
        main: 'ng2-cookies.js',
        defaultExtension: 'js'
      }
    }

3.使用

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', true /* https only */ );
let dt = new Date('October 13, 2017 11:13:45');
Cookie.set('cookieName', 'cookieValue', dt);
Cookie.set('cookieName', 'cookieValue', dt, '/myapp/', 'mydomain.com', true /* https only */ );
 
Cookie.check('cookieName');
 
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();

这个cookie提供的API非常简单,使用很方便。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注