如何在JavaScript中使用文档对象访问Cookie?
使用JavaScript,您可以轻松地使用“document.cookie”属性访问/读取Cookie。由于document.cookie对象的value就是Cookie,因此读取Cookie与写入Cookie一样简单。
document.cookie字符串将保留一个名称=值对的列表,这些对用分号分隔,其中名称是Cookie的名称,值是其字符串值。
在本文中,我们将学习如何在JavaScript中使用文档对象访问Cookie。
语法
document.cookie
返回值 − 所有Cookie都以单个字符串的形式保存在浏览器中。
document.cookie字符串将保留一个名称=值对的列表,这些对用分号分隔,其中名称是Cookie的名称,值是其字符串值。
步骤
要使用其名称提取特定Cookie,我们使用以下步骤。
使用document.cookie属性获取所有Cookie字符串。
使用String.split()方法在每个分号(“;”)处分割字符串,并将返回的数组存储在一个变量中。
创建一个空的Map()来存储键值对。
循环遍历数组,在每次迭代中以“=”分割该元素,并使用Map.set(key, value)方法将其第0个索引设置为Map的键,第一个索引设置为Map的值。
现在您在Map()中拥有每个Cookie及其名称=值格式。
从Map()中按名称检索所需的Cookie。
示例
您可以尝试运行以下代码,学习如何在JavaScript中使用文档对象访问Cookie
<html>
<head>
<script>
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
</script>
</head>
<body>
<form name="myform" action="">
<p> Click the following button to access the cookie:</p>
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>
示例
在此示例中,我们首先使用document.cookie方法设置一些Cookie,然后使用上述方法按名称检索Cookie。
<!DOCTYPE html>
<html>
<head>
<title> How to access cookies using document object in JavaScript </title>
</head>
<body>
<h2> Accessing cookies using document object in JavaScript </h2>
</body>
<script>
// Set some cookie to the browser
document.cookie = "firstname=Saurabh"
document.cookie = "lastname=Jaiswal"
document.cookie = "age=20"
// Print the cookie string
document.write( document.cookie + " ")
// firstname=Saurabh; lastname=Jaiswal; age=20
// There can be another cookie also printed
// if they are saved previously in your browser
// Get the cookie and store in a variable
let myCookies = document.cookie
myCookies = "firstname=Saurabh;lastname=Jaiswal;age=20"
// Split the cookie string at every semicolon
myCookies = myCookies.split(";")
// ['firstname=Saurabh', ' lastname=Jaiswal', ' age=20']
// Create a map to store the cookies in key value Pair
let cookies = new Map();
// Loop through the myCookies array
for( let cookie of myCookies ){
// Split the elements at "="
cookie = cookie.split( "=" )
// Set the first element as key and second element as value
cookies.set( cookie[0], cookie[1] )
}
// Retrive the cookies by its name
document.write( cookies.get( "firstname" ) + " ");
document.write( cookies.get( "lastname" ) + " );
document.write( cookies.get( "age" ) + " ");
</script>
</html>
总而言之,JavaScript允许您使用document.cookie属性访问和读取Cookie。此属性返回一个包含所有保存在浏览器中的Cookie的字符串,每个Cookie都表示为名称=值对,并用分号分隔。
要使用其名称提取特定Cookie,您可以将Cookie字符串在每个分号处分割,创建一个Map对象来存储键值对,并循环遍历Cookie对数组,将第一个元素设置为键,第二个元素设置为Map中的值。然后,您可以从Map中按名称检索所需的Cookie。此技术可用于在用户的浏览器中存储和检索信息,例如用户偏好或登录凭据。
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP