Cookie 允許我們在網(wǎng)絡(luò)瀏覽器中存儲(chǔ)用戶數(shù)據(jù)，以便快速響應(yīng)。例如，當(dāng)用戶在任何 Web 應(yīng)用程序中打開個(gè)人資料頁面時(shí)，網(wǎng)頁都會(huì)從服務(wù)器接收數(shù)據(jù)。服務(wù)器還發(fā)送包含要存儲(chǔ)在 Web 瀏覽器中的數(shù)據(jù)的 cookie。當(dāng)用戶再次訪問個(gè)人資料頁面時(shí)，它會(huì)從 cookie 中獲取數(shù)據(jù)，而不是從服務(wù)器中獲取數(shù)據(jù)以快速加載網(wǎng)頁。
要獲取數(shù)據(jù)，瀏覽器首先查看 cookie，如果沒有找到 cookie 中存儲(chǔ)的數(shù)據(jù)，則會(huì)向服務(wù)器請求。本教程將教我們?nèi)绾卧?JavaScript 中將 cookie 名稱-值對序列化為設(shè)置的 cookie 標(biāo)頭字符串。
為什么我們需要序列化 ??cookie 名稱-值對？
我們可以將cookie作為鍵值對存儲(chǔ)在瀏覽器中，并且cookie不接受名稱值對中的一些特殊字符，如下所示。
\ " / [ ] ( ) < > ? = { } @ , ; :
登錄后復(fù)制
所以，我們需要將上面的字符替換為特殊字符的UTF-8編碼。例如，我們需要用“%20”轉(zhuǎn)義序列替換空格。
使用encodeURIComponent()方法在JavaScript中序列化cookie
encodeURIComponent() 允許開發(fā)人員通過用一個(gè)、兩個(gè)、三個(gè)或四個(gè)轉(zhuǎn)義序列替換特殊字符來對字符串進(jìn)行編碼。這里，轉(zhuǎn)義序列代表字符的 UTF-8 編碼。
語法
用戶可以按照下面的語法使用encodeURIComponent()方法對URI進(jìn)行編碼。
encodeURIComponent(key); encodeURIComponent(value);
登錄后復(fù)制
在上面的語法中，encodeURIComponent()方法分別獲取cookies的鍵和值，并通過用轉(zhuǎn)義序列替換特殊字符來對它們進(jìn)行編碼。
示例
在下面的示例中，我們創(chuàng)建了serializeCookies()函數(shù)，該函數(shù)將鍵和值作為參數(shù)。之后，我們使用encodeURIComponent()方法分別對鍵和值進(jìn)行編碼。接下來，我們使用字符串文字來分隔其鍵值對‘=’字符。
在輸出中，我們可以觀察到轉(zhuǎn)義序列替換了特殊字符。
<html>
<body>
<h3>Using the <i> encodeURIComponent() </i> method to serialize cookies in JavaScript</h3>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
function serializeCookies(key, value) {
let serializeKey = encodeURIComponent(key);
let serializeValue = encodeURIComponent(value);
let serializeCookie = serializeKey + "=" + serializeValue;
return serializeCookie;
}
output.innerHTML += "The key is name, and the value is Shubham Vora. <br>";
output.innerHTML += "After serializing the cookies key-value pair, result is " + serializeCookies("name", "Shubham Vora");
</script>
</body>
</html>
登錄后復(fù)制
示例
在下面的示例中，我們創(chuàng)建了箭頭函數(shù)來序列化 cookie。我們編寫了單行函數(shù)來對鍵值對進(jìn)行編碼并返回它們。此外，我們在serializeCookies()函數(shù)的鍵值參數(shù)中使用了一些更特殊的字符，用戶可以在輸出中觀察到每個(gè)特殊字符都有不同的轉(zhuǎn)義序列。
<html>
<body>
<h3>Using the <i> encodeURIComponent() </i> method to serialize cookies with arrow functions in JavaScript</h3>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
const serializeCookies = (key, value) =>
`${encodeURIComponent(key)}=${encodeURIComponent(value)}`
output.innerHTML += "The key is key@#$12 and value is Val&^%12#$. <br>";
output.innerHTML += "After serializing the cookies key-value pair, result is " + serializeCookies("key@#$12", "Val&^%12#$");
</script>
</body>
</html>
登錄后復(fù)制
示例
在下面的示例中，我們創(chuàng)建了兩個(gè)輸入字段。一種是將key作為輸入，另一種是將value作為輸入。之后，當(dāng)用戶單擊提交按鈕時(shí)，它會(huì)調(diào)用serializeCookies()函數(shù)，該函數(shù)訪問輸入值并使用encodeURIComponent()方法對它們進(jìn)行編碼。
<html>
<body>
<h3>Using the <i> encodeURIComponent() </i> method to serialize cookies in JavaScript</h3>
<label for = "key"> Enter Key </label>
<input type = "text" id = "key">
<br> <br>
<label for = "Value"> Enter Value </label>
<input type = "text" id = "Value">
<br> <br>
<div id = "output"> </div>
<br>
<button onclick = "serializeCookies()"> Submit </button>
<script>
let output = document.getElementById('output');
function serializeCookies() {
let key = document.getElementById('key').value;
let value = document.getElementById('Value');
output.innerHTML = "The encoded key-value pair is " + `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
}
</script>
</body>
</html>
登錄后復(fù)制
在本教程中，我們學(xué)習(xí)了使用encodeURIComponent()方法序列化cookie的鍵值對。此外，我們還看到了序列化 cookie 的不同示例。在最后一個(gè)示例中，用戶可以添加自定義輸入，并觀察 cookie 的編碼值。
以上就是如何在 JavaScript 中將 cookie 名稱-值對序列化為 Set Cookie 標(biāo)頭字符串？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
