详解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简单体验
Jan 10 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
论JavaScript模块化编程
Mar 07 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
php截取后台登陆密码的代码
2012/05/05 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
简单的三步vuex入门
2018/05/20 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python实现简易Web爬虫详解
2018/01/03 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
Python常用断言函数实例汇总
2020/11/30 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
大专毕业自我鉴定
2014/02/04 职场文书
开业主持词
2014/03/21 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书