具有多个名称-值对的 Cookie

17 Mar 2025 | 阅读 2 分钟

在 JavaScript 中，一个 cookie 只能包含一个名称-值对。但是，要存储多个名称-值对，我们可以使用以下方法： -

将自定义对象序列化为 JSON 字符串，解析它，然后存储在 cookie 中。
对于每个名称-值对，使用一个单独的 cookie。

在 Cookie 中存储名称-值对的示例

示例 1

让我们看一个示例来检查 cookie 是否包含多个名称-值对。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    Name: <input type="text" id="name"><br>
    Email: <input type="email" id="email"><br>
    Course: <input type="text" id="course"><br>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
    function setCookie()
    {
//Declaring 3 key-value pairs
        var info="Name="+ document.getElementById("name").value+";Email="+document.getElementById("email").value+";Course="+document.getElementById("course").value;
//Providing all 3 key-value pairs to a single cookie
        document.cookie=info;
    }

    function getCookie()
    {
        if(document.cookie.length!=0)
        {
       //Invoking key-value pair stored in a cookie
        alert(document.cookie);
        }
        else
        {
        alert("Cookie not available")
        }
    }
</script>
</body>
</html>

输出

单击获取 Cookie按钮后，将出现以下对话框。

在这里，我们可以看到只显示了一个名称-值。

但是，如果您在未填写表格的情况下单击获取 Cookie，则会出现以下对话框。

示例 2

让我们看一个使用 JSON 将不同的名称-值对存储在 cookie 中的示例。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    Name: <input type="text" id="name"><br>
    Email: <input type="email" id="email"><br>
    Course: <input type="text" id="course"><br>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">

<script>
    function setCookie()
{
    var obj = {};//Creating custom object
    obj.name = document.getElementById("name").value;
    obj.email = document.getElementById("email").value;
    obj.course = document.getElementById("course").value;

//Converting JavaScript object to JSON string    
var jsonString = JSON.stringify(obj);

    document.cookie = jsonString;
}
         function getCookie()
{
    if( document.cookie.length!=0)
    {
//Parsing JSON string to JSON object
    var obj = JSON.parse(document.cookie);
    
        alert("Name="+obj.name+" "+"Email="+obj.email+" "+"Course="+obj.course);
    }
    else
    {
        alert("Cookie not available");
    }
}
    </script>
</body>
</html>

输出

单击获取 Cookie按钮后，将出现以下对话框。

在这里，我们可以看到所有存储的名称-值对都已显示。

示例 3

让我们看一个将每个名称-值对存储在不同 cookie 中的示例。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    Name: <input type="text" id="name"><br>
    Email: <input type="email" id="email"><br>
    Course: <input type="text" id="course"><br>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get 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 not available");
    }
}   
 </script>
</body>
</html>

输出

单击获取 Cookie按钮后，将出现以下对话框。

在这里，我们也可以看到所有存储的名称-值对都已显示。

下一主题删除 Cookie

具有多个名称-值对的 Cookie

在 Cookie 中存储名称-值对的示例

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

具有多个名称-值对的 Cookie

在 Cookie 中存储名称-值对的示例

示例 1

示例 2

示例 3

相关帖子

JavaScript Cookies

Cookie 属性

删除 Cookie

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器