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的键盘事件修改代码
Feb 24 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
JS forEach跳出循环2种实现方法
Jun 24 Javascript
openlayers4实现点动态扩散
Aug 17 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
轻轻松松学习JavaScript
2007/02/25 Javascript
input的focus方法使用
2010/03/13 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python内置加密模块用法解析
2019/11/25 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
个人向公司借款协议书
2014/10/09 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
一文简单了解MySQL前缀索引
2022/04/03 MySQL
移除Selenium中window.navigator.webdriver值
2022/06/10 Python