JavaScript教程-包含多个名称-值对的Cookie
在JavaScript中，一个Cookie只能包含一个单一的名称-值对。但是，要存储多个名称-值对，我们可以使用以下方法：
- 将自定义对象序列化为JSON字符串，然后解析并存储在Cookie中。
- 对于每个名称-值对，使用单独的Cookie。
存储名称-值对的示例
示例1
让我们看一个示例，以检查一个Cookie是否包含多个名称-值对。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
名称：<input type="text" id="name"><br>
邮件：<input type="email" id="email"><br>
课程：<input type="text" id="course"><br>
<input type="button" value="设置Cookie" onclick="setCookie()">
<input type="button" value="获取Cookie" onclick="getCookie()">
<script>
function setCookie() {
var info = "Name=" + document.getElementById("name").value + ";Email=" + document.getElementById("email").value + ";Course=" + document.getElementById("course").value;
document.cookie = info;
}
function getCookie() {
if (document.cookie.length != 0) {
alert(document.cookie);
} else {
alert("Cookie不可用");
}
}
</script>
</body>
</html>输出:
点击“获取Cookie”按钮，将显示下面的对话框。
在这里，我们可以看到只显示了一个单一的名称-值对。
然而，如果在不填写表单的情况下点击“获取Cookie”，将显示下面的对话框。
示例2
让我们看一个示例，使用JSON在Cookie中存储不同的名称-值对。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
名称：<input type="text" id="name"><br>
邮件：<input type="email" id="email"><br>
课程：<input type="text" id="course"><br>
<input type="button" value="设置Cookie" onclick="setCookie()">
<input type="button" value="获取Cookie" onclick="getCookie()">
<script>
function setCookie() {
var obj = {};
obj.name = document.getElementById("name").value;
obj.email = document.getElementById("email").value;
obj.course = document.getElementById("course").value;
var jsonString = JSON.stringify(obj);
document.cookie = jsonString;
}
function getCookie() {
if (document.cookie.length != 0) {
var obj = JSON.parse(document.cookie);
alert("Name=" + obj.name + " Email=" + obj.email + " Course=" + obj.course);
} else {
alert("Cookie不可用");
}
}
</script>
</body>
</html>输出:
点击“获取Cookie”按钮，将显示下面的对话框。
在这里，我们可以看到所有存储的名称-值对都被显示出来。
示例3
让我们看一个示例，将每个名称-值对存储在不同的Cookie中。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
名称：<input type="text" id="name"><br>
邮件：<input type="email" id="email"><br>
课程：<input type="text" id="course"><br>
<input type="button" value="设置Cookie" onclick="setCookie()">
<input type="button" value="获取Cookie" onclick="getCookie()">
<script>
function setCookie() {
document.cookie = "name=" + document.getElementById("name").value;
document.cookie = "email=" + document.getElementById("email").value;
document.cookie = "course=" + document.getElementById("course").value;
}
function getCookie() {
if (document.cookie.length != 0) {
alert("Name=" + document.getElementById("name").value + " Email=" + document.getElementById("email").value + " Course=" + document.getElementById("course").value);
} else {
alert("Cookie不可用");
}
}
</script>
</body>
</html>输出:
点击“获取Cookie”按钮，将显示下面的对话框。
在这里，同样我们可以看到所有存储的名称-值对都被显示出来。
