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 相关文章推荐
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
React快速入门教程
Jan 17 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
《Python学习手册》学习总结
2018/01/17 Python
Python交互式图形编程的实现
2019/07/25 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
合同意向书范本
2014/07/30 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2014年科普工作总结
2014/12/06 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
地道战观后感
2015/06/04 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
python中的plt.cm.Paired用法说明
2021/05/31 Python
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫