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函数
May 27 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 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缓存设计实现代码
2011/09/30 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
php检测文件编码的方法示例
2014/04/25 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
php实现简单加入购物车功能
2017/03/07 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python实现红包裂变算法
2016/02/16 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
python两种注释用法的示例
2020/10/09 Python
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
个人事迹材料怎么写
2014/12/30 职场文书
银行招聘自荐信
2015/03/06 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书