如何使用 JavaScript 在文档中显示 Cookie 的名称/值对？

我们使用document对象的cookie属性来使用JavaScript在文档中显示Cookie的名称/值对。document 对象是DOM的一部分，对应于浏览器已加载的当前网页。它包含有关浏览器和网页状态的所有信息。

当建立连接时，服务器会处理请求，并在连接关闭后立即忘记用户的所有信息。这对用户体验造成了很大的问题。Cookie 通过为每个网站的用户存储少量但重要的详细信息来解决此问题。这样，每当用户再次访问该网站时，请求也会附带 Cookie，以便个性化用户的体验。

Cookie 是存储重要信息的小型文本文件 (4 KB)，例如用户名、电子邮件、会话 ID 和其他有助于为特定用户定制网页的首选项。

'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 是一种创新的技巧，可以通过存储有关用户的小部分详细信息来增强用户体验。但是，它们也用于许多恶意攻击，因此应谨慎处理。

更新于：2022年9月21日

736 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.