详解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之五(取DOM元素)
Jun 20 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 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
优化使用mysql存储session的php代码
2008/01/10 PHP
php常用文件操作函数汇总
2014/11/22 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
寻找网站后台地址的python脚本
2014/09/01 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
提高EJB性能都有哪些技巧
2012/03/25 面试题
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
毕业自我鉴定总结
2014/03/24 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
自强之星事迹材料
2014/05/12 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书