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 相关文章推荐
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
JavaScript对象学习小结
Sep 02 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
vue编写简单的购物车功能
Jan 08 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
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
Bootstrap精简教程
2015/11/27 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
express 项目分层实践详解
2018/12/10 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python实现dijkstra最短路由算法
2019/01/17 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
C语言面试题
2013/05/19 面试题
教师岗位职责范本
2013/12/29 职场文书
经济管理专业自荐信
2013/12/30 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
个人安全生产承诺书
2014/05/22 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
租赁协议书
2015/01/27 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python