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

304 阅读 0 评论 201 点赞

我是靠谱客的博主落后菠萝，这篇文章主要介绍AngularJS入门教程之Cookies读写操作示例，现在分享给大家，希望可以做个参考。

本文实例讲述了AngularJS的Cookies读写操作。分享给大家供大家参考，具体如下：

虽然使用JavaScript创建和获取Cookie很简单，AngularJS还是把它作为一个单独的模块进行了封装，模块名为ngCookies，和前面的教程中做法一样，先引入angular-cookies.js：

复制代码

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

然后將ngCookies模块注入到我们自定义的模块中：

复制代码

1
var cookiesMod = angular.module("cookiesMod",['ngCookies']);

这里我们需要把Cookies读写相关的服务$cookieStore注入到控制器中。通过$cookieStore的get和put方法进行读和写操作。

我们看一个完整的案例：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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>