資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中將 Cookie 的名稱-值對序列化為 Set Cookie 頭字串？
Cookie 允許我們將使用者資料儲存在 Web 瀏覽器中，以便快速響應。例如，當用戶在任何 Web 應用程式中開啟配置檔案頁面時，網頁會從伺服器接收資料。伺服器還會發送包含資料的 Cookie 以儲存在 Web 瀏覽器中。當用戶再次訪問配置檔案頁面時，它會從 Cookie 中獲取資料，而不是從伺服器獲取資料，從而快速載入網頁。
為了獲取資料，瀏覽器首先檢視 Cookie，如果在 Cookie 中找不到儲存的資料，則會向伺服器發出請求。本教程將教我們如何將 Cookie 的名稱-值對序列化為 JavaScript 中的 Set Cookie 頭字串。
為什麼我們需要將 Cookie 的名稱-值對序列化？
我們可以在瀏覽器中將 Cookie 儲存為鍵值對，並且 Cookie 不接受名稱-值對中的一些特殊字元，如下所示。
\ " / [ ] ( ) < > ? = { } @ , ; :
因此，我們需要將上述字元替換為特殊字元的 UTF-8 編碼。例如，我們需要將空格替換為“%20”轉義序列。
使用 encodeURIComponent() 方法在 JavaScript 中序列化 Cookie
encodeURIComponent() 允許開發人員透過將特殊字元替換為一個、兩個、三個或四個轉義序列來對字串進行編碼。這裡，轉義序列表示字元的 UTF-8 編碼。
語法
使用者可以按照以下語法使用 encodeURIComponent() 方法對 URI 進行編碼。
encodeURIComponent(key); encodeURIComponent(value);
在上述語法中，encodeURIComponent() 方法分別獲取 Cookie 的鍵和值，並透過將特殊字元替換為轉義序列來對它們進行編碼。
示例
在下面的示例中，我們建立了 serializeCookies() 函式，該函式將鍵和值作為引數。之後，我們使用 encodeURIComponent() 方法分別對鍵和值進行編碼。接下來，我們使用字串字面量用“=”字元分隔其鍵值對。
在輸出中，我們可以觀察到轉義序列替換了特殊字元。
<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>
示例
在下面的示例中，我們建立了箭頭函式來序列化 Cookie。我們編寫了一個單行函式來對鍵值對進行編碼並返回它們。此外，我們在 serializeCookies() 函式的鍵值引數中使用了更多特殊字元，使用者可以在輸出中觀察到每個特殊字元都有不同的轉義序列。
<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>
示例
在下面的示例中，我們建立了兩個輸入欄位。一個是獲取鍵作為輸入，另一個是獲取值作為輸入。之後，當用戶點選提交按鈕時，它會呼叫 serializeCookies() 函式，該函式訪問輸入值並使用 encodeURIComponent() 方法對其進行編碼。
<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>
在本教程中，我們學習瞭如何使用 encodeURIComponent() 方法序列化 Cookie 的鍵值對。此外，我們還看到了序列化 Cookie 的不同示例。在最後一個示例中，使用者可以新增自定義輸入，並觀察 Cookie 的編碼值。
856 次瀏覽
