AngularJs轻松入门（八）Cookies读写

最新推荐文章于 2021-06-10 03:39:26 发布

江荣波

最新推荐文章于 2021-06-10 03:39:26 发布

阅读量1.3w

点赞数 4

分类专栏： WEB前端 AngularJs轻松入门文章标签： angularjs

本文链接：https://blog.csdn.net/Rongbo_J/article/details/45486151

版权

WEB前端同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

AngularJs轻松入门

13 篇文章 36 订阅

订阅专栏

虽然使用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信息并以对话框的形式弹出。
接下来看一下效果：

这里写图片描述

江荣波

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJs轻松入门（八）Cookies读写

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

扫一扫