详解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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
12306验证码破解思路分享
Mar 25 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
JS+css3实现幻灯片轮播图
Aug 14 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 字符串函数收集
2010/03/29 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP中设置时区方法小结
2012/06/03 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
20招让你的Python飞起来!
2016/09/27 Python
python实现微信防撤回神器
2019/04/29 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
关于Python解包知识点总结
2020/05/05 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
新浪网技术部笔试题
2016/08/26 面试题
TCP/IP的分层模型
2013/10/27 面试题
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书