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：

angular.module('myApp', ['ngCookies'])
.controller('CookieCtrl', ['$cookies', function($cookies) {
    // 读取字符串Cookie
    var username = $cookies.get('username');
    console.log('Username:', username); // 输出: JohnDoe
    // 读取对象Cookie（自动解析JSON）
    var userProfile = $cookies.getObject('userProfile');
    console.log('User Profile:', userProfile.name); // 输出: John Doe
}]);

使用$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可以显著提升用户体验，但需注意安全性和性能问题，根据实际需求选择合适的存储方案。