详解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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
Node.js+Express配置入门教程
May 19 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
js实现鼠标拖曳效果
Dec 30 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数据库连接
2006/10/09 PHP
php学习之变量的使用
2011/05/29 PHP
php上传文件问题汇总
2015/01/30 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
jquery插件之easing使用
2010/08/19 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
python超简单解决约瑟夫环问题
2015/05/12 Python
Numpy掩码式数组详解
2018/04/17 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python autoescape标签用法解析
2020/01/17 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
写求职信有什么意义
2014/02/17 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2014年城管工作总结
2014/11/20 职场文书
介绍信范文大全
2015/05/07 职场文书
2015选调生工作总结
2015/07/24 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python