详解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的siblings效果的js代码
Aug 09 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 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代码优化的53个细节
2014/03/03 PHP
php动态生成函数示例
2014/03/21 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
numpy自动生成数组详解
2017/12/15 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python如何调用字典的key
2020/05/25 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
护士感人事迹
2014/05/01 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
高三英语教学计划
2015/01/23 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers