`

AngularJS中操作Cookies

阅读更多

        如果你的应用足够大、足够复杂,那么你很快就会遇到这样一咱种情况:你需要在客户端存储一些状态信息,这些状态信息是跨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简单用法分析

    一旦ngCookies模块被引入,我们就可以在控制器或其他服务中注入$cookies服务来操作cookies。$cookies服务提供的方法非常直观,你可以直接通过属性的方式设置和获取cookie的值: ```javascript angular.module('your...

    Angularjs cookie 操作实例详解

    在进行Web开发过程中,尤其是在使用AngularJS框架开发单页应用(SPA)时,经常需要操作Web存储机制之一的Cookie来保存和管理数据。AngularJS本身提供了ngCookies模块来简化对Cookie的操作。本文将基于AngularJS的...

    AngularJS入门教程之Cookies读写操作示例

    在这个AngularJS入门教程中,我们将深入探讨如何使用`ngCookies`模块进行Cookie的读写操作。 首先,为了使用`ngCookies`模块,我们需要在HTML文件中引入`angular-cookies.js`库。这个文件包含了`ngCookies`模块的...

    angularJs源代码

    AngularJS的服务提供了一种方式来封装和重用功能,如 `$http` 用于HTTP请求,`$q` 用于异步操作的承诺,以及 `$cookies` 用于处理浏览器的cookies。源代码中,我们可以看到这些服务是如何被注册和实例化的。 5. **...

    angularjs源文件

    在"angularjs源文件"的压缩包中,我们可以找到实现AngularJS功能的关键文件。这些文件通常包括: 1. `angular.js`:这是AngularJS的核心库文件,包含了框架的基本功能,如数据绑定、依赖注入、路由、模块系统等。它...

    angularjs-1.6.8及相关模块下载

    在AngularJS应用中,数据绑定和指令操作可以触发动画,如显示/隐藏元素、滑动效果等。Angular-Animate简化了这个过程,使得开发者能快速地为应用增添视觉吸引力。 4. **Angular-Cookies**: 这个模块扩展了AngularJS...

    详解Angular操作cookies方法

    在本文中,我们将详细介绍 Angular 操作 cookies 的方法,包括使用 JavaScript 设置和读取 cookies,以及使用 Angular 的 ngCookies 模块来操作 cookies。 一、使用 JavaScript 设置和读取 Cookies 在 JavaScript ...

    AngularJS页面带参跳转及参数解析操作示例

    AngularJS提供了一种简单的方法来获取URL的绝对路径($location.absUrl()),并可以利用JavaScript的字符串操作方法(如indexOf和substr)来解析URL中的参数。解析参数通常涉及以下几个步骤: 1. 获取当前的...

    前端开源库-angular-cookies

    它通过注入`$cookies`服务到控制器、服务或其他组件中来使用,提供了一种与AngularJS的其他特性无缝集成的方式。 **2. 使用AngularCookies** - **注入服务**:在需要使用cookie功能的控制器、服务或其他依赖注入...

    AngularJS中的控制器之间的通讯

    在AngularJS中,控制器是应用的核心组件之一,用于管理视图的数据和逻辑。控制器之间的通信是构建复杂应用程序的关键,特别是当多个控制器需要共享数据或协同工作时。本篇将深入探讨AngularJS中控制器之间如何有效地...

    AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录

    在本通讯录项目中,AngularJS被用来创建动态网页,实现用户界面和数据之间的无缝交互。主要功能包括用户角色的管理、发表微博以及共享位置等。 AngularJS模块通过`angular.module('app', ['ui.router', 'ngCookies'...

    不带Cookies保存的网页层拖动实例

    网页层拖动技术是网页交互设计中的一个重要组成部分,它允许用户通过鼠标拖拽来移动页面上的元素,增强用户的操作体验。这个"不带Cookies保存的网页层拖动实例"是基于jQuery库实现的一个示例,它专注于提供一个无...

    在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

    在AngularJS中,设置请求头信息(headers)的方法可以分为三种主要方式,每种方式有其特点和适用场景,以下是对这些方法的详细说明和比较。 1. 在HTTP请求方法中直接设置请求头 这是最直接的方式,可以在调用$http...

    详解AngularJs中$resource和restfu服务端数据交互

    在AngularJS中,$resource模块提供了一种便捷的方式来与RESTful服务端进行数据交互。它是一个可选的模块,需要额外引用`angular-resource.js`文件才能使用。$resource的主要作用是创建一个资源对象的工厂,这个工厂...

    angularJS 如何读写缓冲的方法(推荐)

    AngularJS提供了一个名为`$cookies`的服务来处理浏览器中的Cookie,这是一种简单的客户端存储方式。然而,原始的`$cookies`服务可能不完全满足所有需求,因此,有时会对其进行封装或扩展,例如在提供的例子中,创建...

    angular-site:AngularJS 站点服务

    - `$cookies`服务:用于管理浏览器中的cookies,实现会话持久化。 - `$rootScope`:所有控制器共享的根作用域,可以用来进行全局状态的管理和事件广播。 - `$q`服务:用于异步操作的承诺(Promise)服务,处理回调...

Global site tag (gtag.js) - Google Analytics