AngularJS入门教程之Cookies读写操作示例,angular中的cookie读写方法【必发365手机版】

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

AngularJS中对cookie的操作封装了一个单独的模块,模块名为ngCookies,若想使用需在页面中先引入angular-cookies.js:

angular中的cookie读写方法,angularcookie读写

AngularJS中对cookie的操作封装了一个单独的模块,模块名为ngCookies,若想使用需在页面中先引入angular-cookies.js:

<script src="js/angular.min.js"></script>
<script src="js/angular-cookies.js"></script>

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

var app = angular.module("myApp",['ngCookies']);

ngCookies模块中有两个cookies读写相关的服务:$cookies和$cookieStroe。无论使用哪种都要先将其注入到控制器中,为了比较二者的区别,都将其注入到控制器中:

app.controller('namesCtrl', ['$cookies','$cookieStore',function($cookies, $cookieStore){}]);

设置cookie用put()方法:

$cookies.put(key, value[, options]);

$cookieStore.put(key, value);

例如设置一个cookie,名为“userName”,值为“yangmin”:

//使用$cookies设置cookie
$cookies.put('userName', 'yangmin');

//使用$cookieStore设置cookie
$cookieStore.put('userName','yangmin');

获取cookie用get()方法:

$cookies.get(key);

$cookieStore.get(key);

例如获取上面设置的“userName”:

$cookies.get(userName);//yangmin

$cookieStore.get("userName"); //yangmin

删除cookie用remove():

$cookies.remove(key[, options]);

$cookieStore.remove(key);

例如删除“userName”

$cookies.remove("userName");

$cookieStore.remove("userName");

$cookies和$cookieStore的区别:

1.$cookies设置的cookie值一般为字符串,$cookieStroe可用于设置字符串、对象、数组等。

$cookies.put("person",{name:"Amy",age:23});
var person = $cookies.get("person");
console.log(person.age);//undefined

$cookieStore.put("person",{name:"Amy",age:23});
var person = $cookieStore.get("person");
console.log(person.age);//23

2.$cookies可设置参数,例如可设置cookie的过期时间。$cookieStore无法设置参数

var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 1);
$cookies.put("userName",“yangmin”,{'expires': expireDate});//“userName”一天后过期

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

AngularJS中对cookie的操作封装了一个单独的模块,模块名为ngCookies,若想使用需在页面中先引入ang…

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

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

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

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

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

ngCookies模块中有两个cookies读写相关的服务:$cookies和$cookieStroe。无论使用哪种都要先将其注入到控制器中,为了比较二者的区别,都将其注入到控制器中:

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

app.controller('namesCtrl', ['$cookies','$cookieStore',function($cookies, $cookieStore){}]);

我们看一个完整的案例:

设置cookie用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.put(key, value[, options]);


$cookieStore.put(key, value);

在页面加载时我们写入Cookies信息,cookie名为person,值为{name:”Rongbo_J”,age:23},点击按钮获取cookie信息并以对话框的形式弹出。

例如设置一个cookie,名为“userName”,值为“yangmin”:

接下来看一下效果:

//使用$cookies设置cookie
$cookies.put('userName', 'yangmin');


//使用$cookieStore设置cookie
$cookieStore.put('userName','yangmin');

必发365手机版 1

获取cookie用get()方法:

AngularJS源码可点击此处本站下载.rar)。

$cookies.get(key);


$cookieStore.get(key);

希望本文所述对大家AngularJS程序设计有所帮助。

例如获取上面设置的“userName”:

您可能感兴趣的文章:

  • Angularjs cookie
    操作实例详解
$cookies.get(userName);//yangmin


$cookieStore.get("userName"); //yangmin

删除cookie用remove():

$cookies.remove(key[, options]);


$cookieStore.remove(key);

例如删除“userName”

$cookies.remove("userName");


$cookieStore.remove("userName");

$cookies和$cookieStore的区别:

1.$cookies设置的cookie值一般为字符串,$cookieStroe可用于设置字符串、对象、数组等。

$cookies.put("person",{name:"Amy",age:23});
var person = $cookies.get("person");
console.log(person.age);//undefined


$cookieStore.put("person",{name:"Amy",age:23});
var person = $cookieStore.get("person");
console.log(person.age);//23

2.$cookies可设置参数,例如可设置cookie的过期时间。$cookieStore无法设置参数

var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 1);
$cookies.put("userName",“yangmin”,{'expires': expireDate});//“userName”一天后过期

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • Angular.js与node.js项目里用cookie校验账户登录详解
  • AngularJS入门教程之Cookies读写操作示例

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website