Javascript教程
JavaScript基础
JavaScript Objects
JavaScript BOM
JavaScript DOM
JavaScript OOP
JavaScript Cookies
JavaScript事件
JavaScript异常
JavaScript常用

Cookie 键/值对

在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>
输出:
具有多个名称的JavaScript Cookie
单击 获取Cookie 按钮时,将出现以下对话框。
具有多个名称的JavaScript Cookie
在这里,我们看到只显示一个键值。
但是,如果单击, 获取Cookie 而不填写表单,则会出现以下对话框。
JavaScript具有多个名称的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>
输出:
具有多个名称的JavaScript Cookie
单击 获取Cookie 按钮时,将出现以下对话框。
具有多个名称的JavaScript 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>
输出:
具有多个名称的JavaScript Cookie
点击 获取Cookie 按钮时,将出现以下对话框。
具有多个名称的JavaScript Cookie
在这里,我们还看到显示了所有存储的键/值对。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4