详解Angular操作cookies方法


Posted in Javascript onJune 01, 2018

本文介绍了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");

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

Javascript 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
浅谈手写node可读流之流动模式
Jun 01 #Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 #Javascript
基于JS实现带动画效果的流程进度条
Jun 01 #Javascript
说说node中的可读流和可写流的区别
Jun 01 #Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 #Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 #Javascript
详解vue-router 命名路由和命名视图
Jun 01 #Javascript
You might like
php生成zip文件类实例
2015/04/07 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
pandas数值计算与排序方法
2018/04/12 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python文件编写好后如何实践
2020/07/07 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
html5教程画矩形代码分享
2013/12/04 HTML / CSS
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
关于工资低的辞职信
2014/01/14 职场文书
校本教研工作制度
2014/01/22 职场文书
医药销售求职信范文
2014/02/01 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
校长个人总结
2015/03/03 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
个人向公司借款协议书
2016/03/19 职场文书