資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 在文件中顯示 Cookie 的名稱/值對？
我們使用document物件的cookie屬性來使用JavaScript在文件中顯示 Cookie 的名稱/值對。DOM的一部分 document 物件，對應於瀏覽器已載入的當前網頁。它包含有關瀏覽器以及網頁狀態的所有資訊。
當建立連線時，伺服器會服務請求，並在連線關閉後忘記有關使用者的所有資訊。這對社群帶來了糟糕的使用者體驗這一棘手問題。Cookie 透過儲存與每個單獨站點相對應的小但重要的使用者詳細資訊來解決此問題。這樣，每當使用者再次訪問該站點時，請求也會附加 Cookie 以個性化使用者的體驗。
Cookie 是儲存重要資訊（如使用者名稱、電子郵件、會話 ID 和其他首選項）的小文字檔案（4 KB），有助於為特定使用者定製網頁。
'dark_mode=true'
像這樣的瑣碎事情，是使用者的偏好，因此可以方便地儲存在相應的 Cookie 檔案中。
使用document.cookie屬性
document.cookie屬性返回一個由 (;) 分隔的名稱/值對列表。它儲存與當前網頁相關的 Cookie 資訊。
語法
var cookies = document.cookie;
以上程式碼行返回名稱/值對列表，並將其儲存在 cookies 變數中。
讓我們看一個例子來更好地理解。
示例 1
在下面的程式碼片段中，我們提取主機名並在 HTML 的正文中記錄它。
<!DOCTYPE html> <html> <body> <div id = "result"></div> <script> var val = document.cookie; document.getElementById("result").innerHTML = "Name/ Value pair of Cookies: " + val; </script> </body> </html>
返回的列表可以根據 (;) 字元進行分割，並可以作為列表進行迭代。
var cookielist = document.cookie.split(';')
這會返回一個name=value字串列表，並將其儲存在 cookielist 變數中。
讓我們看一個例子來更好地理解。
示例 2
在下面的程式碼片段中，我們分割了 document.cookie 返回的字串並遍歷它以訪問每個 Cookie。
<!DOCTYPE html> <html> <body> <div id = "result"></div> <script> var val = document.cookie; var cookielist = val.split(';') var text = "" for(var i = 0 ; i < cookielist.length ; i++){ text += cookielist[i] + "<br>" } result.innerHTML = "Name/ Value pair of Cookies: <br>" + text ; </script> </body> </html>
我們還可以使用 JavaScript 建立自己的 Cookie。
document.cookie = "name=value"
這會建立一個新的 Cookie，其中包含一個名稱/值對，並將其儲存在 document.cookie 屬性中。
讓我們看一個例子來更好地理解。
示例 3
在下面的程式碼片段中，我們提取使用者輸入並在 document 物件中建立一個相應的 Cookie。
<!DOCTYPE html> <html> <body> Add your own cookies ! <br> Enter a Key-value pair : <input id = "cookie" type = "text">{name=value} <br> <button id = "button" onclick = "create()"> Create ! </button> <br> <p id = "alert"> </p> Click below to show all cookies ! <button id = "show" onclick = "show()"> show cookies ! </button> <div id = "result"></div> <script> var result = document.getElementById("result"); function create(){ var cookieObj = document.getElementById("cookie"); var value = cookieObj.value document.cookie = value ; document.getElementById("alert").innerHTML = "cookie created !"; } function show(){ var val = document.cookie; result.innerHTML = "Name/ Value pair of Cookies: " + val; } </script> </body> </html>
"建立！"按鈕會觸發create()JavaScript 函式，然後該函式會建立一個新的 Cookie。然後可以使用“顯示”按鈕檢視新新增到網頁的 Cookie。
結論
Cookie 是一種創新的技巧，可以透過儲存有關使用者的小部分詳細資訊來增強使用者體驗。但是，它們也用於許多惡意攻擊，因此應謹慎處理。
736 次檢視
