AngularJS入门教程之Cookies读写操作示例


Posted in Javascript onNovember 02, 2016

本文实例讲述了AngularJS的Cookies读写操作。分享给大家供大家参考,具体如下:

虽然使用JavaScript创建和获取Cookie很简单,AngularJS还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookies.js:

<script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"></script>

然后??gCookies模块注入到我们自定义的模块中:

var cookiesMod = angular.module("cookiesMod",['ngCookies']);

这里我们需要把Cookies读写相关的服务$cookieStore注入到控制器中。通过$cookieStore的get和put方法进行读和写操作

我们看一个完整的案例:

<!DOCTYPE html>
<html ng-app="cookiesMod">
<head lang="en">
  <meta charset="UTF-8">
  <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
  <script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"></script>
  <title>tutorial08</title>
</head>
<body ng-controller="CookiesController" ng-init="init()">
<button ng-click="getInfo()">获取Cookies信息</button>
</body>
<script>
  var cookiesMod = angular.module("cookiesMod",['ngCookies']);
  cookiesMod.controller("CookiesController",function($scope,$log,$cookieStore){
    $scope.init = function()
    {
      $log.info("init functionn");
      $cookieStore.put("person",{name:"Rongbo_J",age:23});
    }
    $scope.getInfo = function()
    {
      var person = $cookieStore.get("person") ;
      alert("name : " + person.name +" , "+ "age : " + person.age);
    }
  });
</script>
</html>

在页面加载时我们写入Cookies信息,cookie名为person,值为{name:"Rongbo_J",age:23},点击按钮获取cookie信息并以对话框的形式弹出。

接下来看一下效果:

AngularJS入门教程之Cookies读写操作示例

AngularJS源码可点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
优化 JavaScript 代码的方法小结
Jul 16 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
js工具方法弹出蒙版
May 08 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
小程序实现密码输入框
Nov 16 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 #Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 #Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 #Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 #Javascript
快速解决js中window.location.href不工作的问题
Nov 02 #Javascript
javascript创建对象的3种方法
Nov 02 #Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 #Javascript
You might like
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
Prototype Object对象 学习
2009/07/12 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
会计自我鉴定范文
2013/10/06 职场文书
国际贸易专业求职信
2014/06/04 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
销售顾问工作计划书
2014/08/15 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
邀请书模板
2015/02/02 职场文书
创先争优活动个人总结
2015/03/04 职场文书
运动会报道稿大全
2015/07/23 职场文书
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers