数据结构
网络
关系数据库管理系统
操作系统
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 次查看
