详解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 TextArea动态显示剩余字符
Oct 22 Javascript
JS 表单验证大全
Nov 23 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
浅谈手写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中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
javascript运行机制之this详细介绍
2014/02/07 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python如何使用unittest测试接口
2018/04/04 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
党校学习自我鉴定
2014/02/24 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
法学专业求职信
2014/07/15 职场文书
计算机实训报告范文
2014/11/05 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
pandas 实现将NaN转换为None
2021/05/14 Python