详解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 鼠标滚轮事件
Apr 09 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
JavaScript手风琴页面制作
May 17 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
js实现计时器秒表功能
Dec 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python文本相似性计算之编辑距离详解
2016/11/28 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
python web基础之加载静态文件实例
2018/03/20 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python简单操作excle的方法
2018/09/12 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Python函数式编程实例详解
2020/01/17 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
电子商务专员岗位职责
2013/12/11 职场文书
校园活动策划书范文
2014/01/10 职场文书
施工材料员岗位职责
2014/02/12 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
保护环境演讲稿
2014/05/10 职场文书
个人作风建设总结
2014/10/23 职场文书
2014年护理部工作总结
2014/11/14 职场文书