详解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 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
Bootstrap插件全集
Jul 18 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
浅析Vue 生命周期
Jun 21 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 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实现图片局部打马赛克的方法
2015/02/11 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
python单元测试unittest实例详解
2015/05/11 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
python中os模块详解
2016/10/14 Python
Python常见工厂函数用法示例
2018/03/21 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
Python Celery多队列配置代码实例
2019/11/22 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
老师自我鉴定范文
2013/12/25 职场文书
三字经教学反思
2014/04/26 职场文书
绘画专业自荐信
2014/07/04 职场文书
搞笑老公保证书
2015/02/26 职场文书
中小企业员工手册范本
2015/05/14 职场文书
单位综合评价意见
2015/06/05 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python