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 相关文章推荐
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
express 项目分层实践详解
Dec 10 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
javascript实现时钟动画
Dec 03 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
php的ajax简单实例
2014/02/27 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python二分查找详解
2015/09/13 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
django使用graphql的实例
2020/09/02 Python
男方父母婚礼答谢词
2014/01/25 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
工伤赔偿协议书
2014/04/15 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
运动会班级前导词
2015/07/20 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
mysql insert 存在即不插入语法说明
2022/03/25 MySQL