javascript，// 写Cookie: $cookieStore.put('name', 'value');，// 读Cookie: var value = $cookieStore.get('name');，``AngularJS 是一个强大的前端框架，它使得开发单页应用（SPA）变得更加容易，在开发 Web 应用时，Cookies 是一个重要的概念，用于在客户端存储数据，本文将介绍如何在 AngularJS 中进行 Cookies 的读写操作。
Cookies 的基本概念
Cookie 是一种在客户端存储少量数据的机制，通常用于保存会话信息、用户偏好设置等，每个 Cookie 都由一个名字和值组成，并且可以设置过期时间、路径和域等属性。
2. 在 AngularJS 中读取 Cookies
在 AngularJS 中，可以使用$cookies 服务来读取 Cookies，需要确保已经注入了ngCookies 模块。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Cookies 示例</title>
<script src="https://ajax.lug.ustc.edu.cn/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.lug.ustc.edu.cn/ajax/libs/angularjs/1.8.2/angular-cookies.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>读取 Cookie 示例</h1>
<p>读取到的 Cookie: {{ cookieValue }}</p>
<script>
var app = angular.module('myApp', ['ngCookies']);
app.controller('MainController', function($scope, $cookies) {
// 假设我们之前设置了一个名为 'user' 的 Cookie
$scope.cookieValue = $cookies.get('user');
});
</script>
</body>
</html>
在这个示例中，我们首先加载了 AngularJS 和ngCookies 模块，然后在控制器中使用$cookies.get('user') 方法读取名为user 的 Cookie。
3. 在 AngularJS 中写入 Cookies
同样地，使用$cookies 服务的put 方法可以写入或更新 Cookies，以下是一个示例：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Cookies 示例</title>
<script src="https://ajax.lug.ustc.edu.cn/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.lug.ustc.edu.cn/ajax/libs/angularjs/1.8.2/angular-cookies.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>写入 Cookie 示例</h1>
<button ng-click="setCookie()">设置 Cookie</button>
<p>设置后的 Cookie: {{ cookieValue }}</p>
<script>
var app = angular.module('myApp', ['ngCookies']);
app.controller('MainController', function($scope, $cookies) {
$scope.setCookie = function() {
// 设置一个名为 'user' 的 Cookie，值为 'John Doe'，有效期为 7 天
$cookies.put('user', 'John Doe', { 'path': '/', 'expires': '/7d' });
$scope.cookieValue = $cookies.get('user');
};
});
</script>
</body>
</html>
在这个示例中，我们添加了一个按钮，当点击按钮时，会调用setCookie 方法设置一个名为user 的 Cookie，值为John Doe，并设置有效期为 7 天，然后再次读取该 Cookie 并显示其值。
Cookies 的删除操作
要删除一个 Cookie，可以将它的过期时间设置为过去的时间点，以下是一个示例：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Cookies 示例</title>
<script src="https://ajax.lug.ustc.edu.cn/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.lug.ustc.edu.cn/ajax/libs/angularjs/1.8.2/angular-cookies.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>删除 Cookie 示例</h1>
<button ng-click="deleteCookie()">删除 Cookie</button>
<p>删除后的 Cookie: {{ cookieValue }}</p>
<script>
var app = angular.module('myApp', ['ngCookies']);
app.controller('MainController', function($scope, $cookies) {
$scope.deleteCookie = function() {
// 删除名为 'user' 的 Cookie
$cookies.remove('user');
$scope.cookieValue = $cookies.get('user'); // 应该返回 undefined
};
});
</script>
</body>
</html>
在这个示例中，我们添加了一个按钮，当点击按钮时，会调用deleteCookie 方法删除名为user 的 Cookie，并尝试再次读取该 Cookie，此时应该返回undefined。
Cookies 的常用属性
| 属性名 | 描述 |
| name | Cookie 的名称 |
| value | Cookie 的值 |
| path | Cookie 的有效路径 |
| domain | Cookie 的有效域 |
| expires / max-age | Cookie 的有效期 |
| secure | 如果设置为 true，只有在通过 HTTPS 连接时才会发送 Cookie |
| httpOnly | 如果设置为 true，JavaScript 将无法访问 Cookie |
| sameSite | 控制 Cookie 的跨站请求行为 |
相关问答 FAQs
Q1: 如何更改 Cookies 的有效期？
A1: 你可以通过在put 方法中设置expires 属性来更改 Cookies 的有效期，将有效期设置为 7 天：
$cookies.put('user', 'John Doe', { 'path': '/', 'expires': '/7d' });
或者使用max-age 属性以秒为单位设置有效期：
$cookies.put('user', 'John Doe', { 'path': '/', 'max-age': 604800 }); // 604800 秒 = 7 天
Q2: 如何防止 XSS 攻击中的 Cookie 劫持？
A2: 为了防止 XSS 攻击中的 Cookie 劫持，你可以设置HttpOnly 属性，这样 JavaScript 将无法访问 Cookie，还可以设置Secure 属性，以确保 Cookie 只在 HTTPS 连接中传输。
$cookies.put('user', 'John Doe', { 'path': '/', 'expires': '/7d', 'secure': true, 'httpOnly': true });
小编有话说
在 Web 开发中，合理使用 Cookies 可以提高用户体验和应用的功能，过度依赖 Cookies 也可能导致安全隐患，因此在实际应用中应谨慎使用，希望本文能帮助你更好地理解和使用 AngularJS 中的 Cookies 操作，如果你有任何问题或建议，欢迎留言讨论！
小伙伴们，上文介绍了“AngularJS入门教程之Cookies读写操作示例”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/784636.html
微信扫一扫 