详解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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
Js中sort()方法的用法
2006/11/04 Javascript
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
机电一体化职业规划书
2014/01/07 职场文书
2014信息公开实施方案
2014/02/22 职场文书
人事专员的职责
2014/02/26 职场文书
大学生就业策划书范文
2014/04/04 职场文书
食品安全承诺书
2014/05/22 职场文书
十佳青年事迹材料
2014/08/21 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
2014年团总支工作总结
2014/11/21 职场文书
个园导游词
2015/02/04 职场文书
研究生个人学年总结
2015/02/14 职场文书
情人节单身感言
2015/08/03 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang