详解Angular操作cookies方法

 更新时间:2018年06月01日 10:17:27   作者:Wsscat  
这篇文章主要介绍了详解Angular操作cookies方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了Angular操作cookies方法,分享给大家,具体如下:

var setCookie = function(name, value) {
         var Days = 30;
         var exp = new Date();
         exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
         document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
         //$cookies[name] = value;
        };

这是用Javascript写的方法去设置

var getCookie = function(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg))
   return unescape(arr[2]);
  else
   return null;
 }

这是用Javascript写的方法去读取

其实angular也有相应的方法去操作cookies的,加载这两个module的依赖文件

<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-cookies.min.js"></script>

源码是这样的

function(a, b, c) {
  "use strict";
  b.module("ngCookies", ["ng"]).factory("$cookies", ["$rootScope", "$browser",
   function(a, d) {
    function e() {
     var a, e, f, i;
     for (a in h) k(g[a]) && d.cookies(a, c);
     for (a in g) e = g[a], b.isString(e) ? e !== h[a] && (d.cookies(a, e), i = !0) : b.isDefined(h[a]) ? g[a] = h[a] : delete g[a];
     if (i) {
      i = !1, f = d.cookies();
      for (a in g) g[a] !== f[a] && (k(f[a]) ? delete g[a] : g[a] = f[a], i = !0)
     }
    }
    var f, g = {},
     h = {},
     i = !1,
     j = b.copy,
     k = b.isUndefined;
    return d.addPollFn(function() {
     var b = d.cookies();
     f != b && (f = b, j(b, h), j(b, g), i && a.$apply())
    })(), i = !0, a.$watch(e), g
   }
  ]).factory("$cookieStore", ["$cookies",
   function(a) {
    return {
     get: function(c) {
      var d = a[c];
      return d ? b.fromJson(d) : d
     },
     put: function(c, d) {
      a[c] = b.toJson(d)
     },
     remove: function(b) {
      delete a[b]
     }
    }
   }
  ])
 }(window, window.angular) 

$cookies[name] = value; 这个是angular设置cookies方法

$cookieStore

提供一个被session cookies支持的键值对(字符串-对象)存储。被存入和取出的对象将自动通过angular的toJson/fromJson进行序列化/反序列化。

$cookies

提供浏览器cookies的读/写访问操作。

这两个都要引入ngCookies模块才能使用,这个模块在1.4版本之后就有了

从源码中得知$cookieStore返回了三个方法get put remove 他们分别用toJson/fromJson进行序列化/反序列化

简单的写了几个例子来测试下

<!DOCTYPE html>
<html ng-app="AutumnsWindsApp" ng-controller="aswController">

 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
 <script src="http://code.angularjs.org/1.2.9/angular-cookies.min.js"></script>

 <body>
  {{title}}
 </body>
 <script>
  var AutumnsWindsApp = angular.module('AutumnsWindsApp', ['ngCookies']);
  AutumnsWindsApp.controller('aswController', function($cookies, $cookieStore, $scope) {
   $cookies.name = 'autumnswind';
   $scope.title = "Hello, i'm autumnswind :)";
   $cookieStore.put("skill", "##");
   //删除cookies
   $cookieStore.remove("name");
   //设置过期日期
   var time = new Date().getTime() + 5000;
   $cookieStore.put("cookie", "Hello wsscat", {
    expires: new Date(new Date().getTime() + 5000)
   });

   $cookieStore.put("objCookie", {
    value: "wsscat cat cat",
    age: "3",
   }, {
    expires: new Date(new Date().getTime() + 5000)
   });
   console.log($cookies);
   console.log($cookies['objCookie']);
  })
 </script>
</html>

其实平时我们这样就可以把自己需要的cookies设置进去 

$cookies.name = 'autumnswind';

但是当我们要设置一个有效时间的时候我们就用这样的方法把它设置进去

var time = new Date().getTime() + 5000;
   $cookieStore.put("cookie", "Hello wsscat", {
    expires: new Date(new Date().getTime() + 5000)
   });

我们还可以进行删除等操作

$cookieStore.remove("name");

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • AngularJS学习第二篇 AngularJS依赖注入

    AngularJS学习第二篇 AngularJS依赖注入

    这篇文章主要为大家详细介绍了AngularJS学习第二篇,理解什么是AngularJS依赖注入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Angular2使用jQuery的方法教程

    Angular2使用jQuery的方法教程

    这篇文章主要给大家介绍了关于Angular2使用jQuery的方法教程,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来跟着小编一起学习学习吧。
    2017-05-05
  • angular十大常见问题

    angular十大常见问题

    本文主要介绍了angular十大常见问题,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • AngularJS 多指令Scope问题的解决

    AngularJS 多指令Scope问题的解决

    本文介绍了AngularJS 多指令Scope问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • angular第三方包开发整理(小结)

    angular第三方包开发整理(小结)

    本篇文章主要介绍了angular第三方包开发整理(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 详解angular应用容器化部署

    详解angular应用容器化部署

    这篇文章主要介绍了详解angular应用容器化部署,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • AngularJs入门教程之环境搭建+创建应用示例

    AngularJs入门教程之环境搭建+创建应用示例

    这篇文章主要介绍了AngularJs入门教程之环境搭建+创建应用的方法,较为详细的分析了AngularJS的功能、下载及应用创建方法,需要的朋友可以参考下
    2016-11-11
  • AngularJS动态绑定HTML的方法分析

    AngularJS动态绑定HTML的方法分析

    这篇文章主要介绍了AngularJS动态绑定HTML的方法,结合实例形式分析了AngularJS实现动态绑定HTML的相关操作指令用法与使用注意事项,需要的朋友可以参考下
    2016-11-11
  • angular json对象push到数组中的方法

    angular json对象push到数组中的方法

    下面小编就为大家分享一篇angular json对象push到数组中的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Angular.js中ng-include用法及多标签页面的实现方式详解

    Angular.js中ng-include用法及多标签页面的实现方式详解

    这篇文章主要给大家介绍了在Angular.js中ng-include用法及多标签页面的实现方式的相关资料,文中通过示例代码介绍的非常详细,相信对大家具有一定的参考学习价值,需要的朋友们下面随着小编一起来学习学习吧。
    2017-05-05

最新评论