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 date对象的减法处理实现代码
Dec 28 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
Vue.js图片预览插件使用详解
Aug 27 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP自定义多进制的方法
2016/11/03 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
JavaScript的漂亮的代码片段
2013/06/05 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
Python获取当前时间的方法
2014/01/14 Python
Python实现读取并保存文件的类
2017/05/11 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
python中实现字符串翻转的方法
2018/07/11 Python
python如何制作缩略图
2019/04/30 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
护士个人简历自荐信
2013/10/18 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
市场专员岗位职责
2014/02/14 职场文书
毕业生自荐信格式
2014/03/07 职场文书
食品流通安全承诺书
2014/05/22 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python