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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 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基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Python用threading实现多线程详解
2017/02/03 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
Java的五个基础面试题
2016/02/26 面试题
Linux内核产生并发的原因
2012/07/13 面试题
80后职场人的职业生涯规划
2014/03/08 职场文书
大二学习计划书范文
2014/04/27 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android