AngularJS中如何读写Cookies？入门教程示例详解

在AngularJS开发中,Cookies是一种常用的客户端存储技术，用于在用户浏览器中保存少量数据，实现跨页面或会话间的数据持久化，本文将通过详细示例，介绍AngularJS中Cookies的读写操作，帮助开发者快速掌握这一实用功能。

AngularJS Cookies模块概述

AngularJS本身并未直接提供操作Cookies的方法,但通过ngCookies模块可以轻松实现Cookie的读写。ngCookies模块是AngularJS的官方扩展，提供了$cookies和$cookieStore两个服务，前者用于基础Cookie操作，后者提供了更便捷的API，使用前需在模块中依赖载入ngCookies，并通过CDN或npm安装相关文件。

Cookie写入操作示例

使用$cookies服务写入

$cookies服务提供了put()和putObject()方法用于写入Cookie。put()方法用于存储字符串值，而putObject()用于存储对象类型数据，以下为具体示例代码：

angular.module('myApp', ['ngCookies']) .controller('CookieCtrl', ['$cookies', function($cookies) { // 写入字符串Cookie $cookies.put('username', 'JohnDoe'); // 写入对象Cookie（自动序列化为JSON） $cookies.putObject('userProfile', { name: 'John Doe', age: 30, email: 'john@example.com' }); }]);

使用$cookieStore服务写入

$cookieStore服务是对$cookies的封装，提供了更简洁的API，其put()和putObject()方法与$cookies类似，但使用更为便捷：

angular.module('myApp', ['ngCookies']) .controller('CookieCtrl', ['$cookieStore', function($cookieStore) { // 写入字符串Cookie $cookieStore.put('sessionId', 'xyz123'); // 写入对象Cookie $cookieStore.putObject('settings', { theme: 'dark', notifications: true }); }]);

Cookie写入参数说明

Cookie读取操作示例

使用$cookies服务读取

$cookies服务提供了get()和getObject()方法用于读取Cookie：

使用$cookieStore服务读取

$cookieStore的读取方法同样更为简洁：

angular.module('myApp', ['ngCookies']) .controller('CookieCtrl', ['$cookieStore', function($cookieStore) { // 读取字符串Cookie var sessionId = $cookieStore.get('sessionId'); console.log('Session ID:', sessionId); // 读取对象Cookie var settings = $cookieStore.get('settings'); console.log('Theme:', settings.theme); }]);

Cookie读取注意事项

• 读取不存在的Cookie将返回undefined
• 对象类型的Cookie需使用getObject()方法，直接使用get()会返回JSON字符串
• Cookie读取受同源策略和路径限制

Cookie删除操作示例

删除单个Cookie

$cookies和$cookieStore均提供remove()方法删除指定Cookie：

angular.module('myApp', ['ngCookies']) .controller('CookieCtrl', ['$cookies', '$cookieStore', function($cookies, $cookieStore) { // 使用$cookies删除 $cookies.remove('username'); // 使用$cookieStore删除 $cookieStore.remove('sessionId'); }]);

删除所有Cookie

需结合$cookies的getAll()和remove()方法实现：

angular.module('myApp', ['ngCookies']) .controller('CookieCtrl', ['$cookies', function($cookies) { var allCookies = $cookies.getAll(); angular.forEach(allCookies, function(value, key) { $cookies.remove(key); }); }]);

Cookie高级配置

通过options参数可以控制Cookie的属性，如过期时间、路径、域等：

// 设置7天后过期 $cookies.put('tempData', 'value', { expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), path: '/', domain: 'example.com', secure: true });

实际应用场景

Cookies在AngularJS中常用于以下场景：

1. 用户状态保持：存储登录状态、用户偏好设置
2. 购物车功能：临时保存用户选择的商品
3. 多语言支持：记录用户选择的语言
4. 分析统计：跟踪用户访问路径和行为

注意事项与最佳实践

1. 安全性：避免存储敏感信息（如密码、token），必要时设置secure: true
2. 大小限制：单个Cookie不超过4KB，总数量不超过20个（不同浏览器有差异）
3. 性能影响：Cookie会随每次HTTP请求发送，避免存储过大数据
4. 替代方案：对于大量数据，建议使用localStorage或sessionStorage

通过本文的示例和讲解,开发者应已掌握AngularJS中Cookies的基本操作，合理使用Cookies可以显著提升用户体验，但需注意安全性和性能问题，根据实际需求选择合适的存储方案。