详解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实现table单双行不同显示并能单行选中
Jul 25 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
javascript的BOM汇总
Jul 16 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 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
杏林同学录(一)
2006/10/09 PHP
PHP中一个控制字符串输出的函数
2006/10/09 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
python获取代理IP的实例分享
2018/05/07 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python中SQLite如何使用
2020/05/27 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
开学寄语大全
2014/04/08 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
企业文化标语大全
2014/06/10 职场文书
品质口号大全
2014/06/17 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
2015年林业工作总结
2015/05/14 职场文书
转学证明范本
2015/06/19 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL