详解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 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
js或css实现滚动广告的几种方案
Jan 28 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
Vue父子组件传值的一些坑
Sep 16 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
详谈PHP编码转换问题
2015/07/28 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
js导航菜单(自写)简单大方
2013/03/28 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python实现的重启关机程序实例
2014/08/21 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
简单的Python人脸识别系统
2020/07/14 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
iostream与iostream.h的区别
2015/01/16 面试题
杭州时比特电子有限公司SQL
2013/08/22 面试题
《桂花雨》教学反思
2014/04/12 职场文书
质量管理标语
2014/06/12 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
小爸爸观后感
2015/06/15 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
使用 Apache 反向代理的设置技巧
2022/01/18 Servers