当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

AngularJS中操作Cookies

发表于: 2014-08-31   作者:bijian1013   来源:转载   浏览:
摘要:         如果你的应用足够大、足够复杂,那么你很快就会遇到这样一咱种情况:你需要在客户端存储一些状态信息,这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。         幸运的是,这种方式已经一去不复返了,在所有现代浏览器中几乎

        如果你的应用足够大、足够复杂,那么你很快就会遇到这样一咱种情况:你需要在客户端存储一些状态信息,这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。

        幸运的是,这种方式已经一去不复返了,在所有现代浏览器中几乎都可以使用HTML5 API了。更进一步,AngularJS为你提供了很好用的$cookie和$cookieStore API来操作cookie。这两个服务都可以和HTML5 cookie(http://www.w3schools.com/html/html5_webstorage.asp)很好地协同工作——如果发现可以使用HTML5 API,它们就会使用;如果发现不能使用HTML5 API,它们就会使用原始的document.cookies对象。在两种方式中,可以用相同的接口来调用。

        我们先来看一下$cookies服务。$cookies只是一个简单的对象,它带有一些键和值。向这个对象上添加键和值就相当于向cookie里添加信息;删除键和值就相当于从对应的cookie里进行删除操作——就是这么简单。

        但是在大多数情况下,我们并不想直接在$cookies层面上进行操作,因为那意味着直接操作字符串,并且需要自已进行解析,需要把数据解析成对象,或者把对象解析成数据。对于这些场景,我们可以使用$cookieStore,它提供了编程的方式来写入和删除cookies。那么,在使用$cookieStore的情况下,如果想让一个SearchController能记住之前的5个搜索结果应该怎么做呢?

function SearchController($scope, $cookieStore) {
    $scope.search = function(text) {
         //在这里进行搜索操作
         ...
         //获取之前的搜索结果,如果没有找到任何结果,初始化一个空数组
         var pastSearches = $cookieStore.get('myapp.past.searches') || [];
         if(pastSearches.length > 5) {
              pastSearches = pastSearches.splice(0);
         }
         pastSearches.push(text);
         $cookieStore.push('myapp.past.searches', pastSearches);
   };
}

 

文章来源:《用AngularJS开发下一代Web应用》

AngularJS中操作Cookies

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号