当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
Cookies的概念就不用哆嗦了,大家都很常用。不过我好像很少用,呵呵。 1.创建Cookies 程序代码 using
一、什么是cookies?   cookies是一种对客户端硬盘的数据进行存取的技术,这种技术能够让网站把少
Asp.Net里的Cookies 什么是cookies Cookies有很多种,网站上的cookie,浏览器的cookie,会话cookie
2012-04-21 15:45 by 随风浪迹天涯, 204 visits, 收藏, 编辑 一。Cookies简介 想必做.NET的人都遇到
一。Cookies简介 想必做.NET的人都遇到过Cookies这个名词,没有用过也至少听过吧!(估计这种情形特
$location服务是对所有浏览器中都存在的window.location对象的封装。那么,为什么需要使用$location
$http服务提供了一个非常低级的实现,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活
对于菜单、上下文敏感的工具以及很多其他情况来说,显示和隐藏元素是一项核心的功能。与Angualr中其
真正的应用需要和真实的服务器进行交互,无论你是想把数据持久化到云端,还是需要与其他用户进行实
一.使用$watch监控数据模型的变化 在scope内置的所有函数中,用得最多的可能就是$watch函数了,当你
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号