欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS入门教程之Cookies读写操作示例

程序员文章站 2024-02-03 20:31:52
本文实例讲述了angularjs的cookies读写操作。分享给大家供大家参考,具体如下: 虽然使用javascript创建和获取cookie很简单,angularjs还...

本文实例讲述了angularjs的cookies读写操作。分享给大家供大家参考,具体如下:

虽然使用javascript创建和获取cookie很简单,angularjs还是把它作为一个单独的模块进行了封装,模块名为ngcookies,和前面的教程中做法一样,先引入angular-cookies.js:

<script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"></script>

然后將ngcookies模块注入到我们自定义的模块中:

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程序设计有所帮助。