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 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
浅析Jquery操作select
Dec 13 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
vue 组件开发原理与实现方法详解
Nov 29 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
jQuery中each()方法用法实例
2014/12/27 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
js选项卡的实现方法
2015/02/09 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
python实现内存监控系统
2021/03/07 Python
python 拼接文件路径的方法
2018/10/23 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
高三政治教学反思
2014/02/06 职场文书
大学生两会学习心得体会
2014/03/10 职场文书