浅析angular框架的cookie

相信接触过网页编程的基本上都知道cookie这个东西吧,一个毫不起眼,但是又十分的重要的东西,今天我们就来分析一下这个小东西,我们都知道客服端通过发送http请求到服务器请求我们的数据,当我们的服务器接收到这个响应之后,经过处理之后会给出相应的响应,也就是传送回来我们需要的数据。但是如果我们关闭了页面之后再一次打开发送相应的请求会有什么情况发生呢?是否会快一点?没错,那就是cookie的作用。

  在举一个列子,比如A页面里面有你的id,姓名,密码等信息,然后你通过A页面跳转到B页面,为什么我们的B页面同样会出现我们的一些信息呢?当然这些信息我么是看不见的,但是这些信息又却是存在的,那也是我们的cookie的作用,在页面之间的跳转的时候,页面之间必须的信息就会存放在cookie之中,这个时候的cookie就像是一个中间件的作用,了解node-js的就知道,里面为我们提供了许多的中间件,这个省去不讲。当页面发生跳转的时候,即将跳转的页面就会自动获取cookie中的值,在这里我们回忆一下,主要的保存用户信息的小件有后台的session,还有很古老的input框,还有一个就是这里讲述的cookie了。

下面我将就angular里面cookie做一个简单的讲解,下面是一个完整的页面,当然我们的angular的js文件需要我们单独引入。

<!DOCTYPE html>
<html ng-app="cookiemod">---------------总的控制器作用
<head >
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular1.2.3.js"></script>--------------------这个是使用angular必须使用的文件
    <script src="js/angular-cookies.js"></script>--------------专门的cookie js文件,在这里还提供了很多的模块文件,需要的话可以去github进行下载。
    <script >
        var ckmod = angular.module('cookiemod',['ngCookies']);--------中括号里面就是我们需要依赖的模块,前面也是一样的进行代码的模块化

        ckmod.controller('showCookie',['$scope','$cookieStore', function ($scope,$cookieStore) {
            $scope.setCookieinfo= function () {
                $cookieStore.put('name','lanveer');-----------》设置一个cookie值
            }

            $scope.getCookieinfo= function () {
                var favoriteCookie = $cookieStore.get('name');--------------》得到这个设置的cookie值
                 console.log(favoriteCookie);
            }

            $scope.removeCookieinfo= function () {
                $cookieStore.remove('name');----------------------》和之前的操作差不多,在这里是移除这个cookie值
            }
        }]);

    </script>
</head>
<body>
   <div ng-controller="showCookie">
       <button ng-click="setCookieinfo()">设置</button>
       <button ng-click="getCookieinfo()">获得</button>
       <button ng-click="removeCookieinfo()">删除</button>

   </div>
</body>
</html>

以上就是我们一个angular李卖弄简单cookie的应用,具体的功能在后面的学习中再进行总结。