如何在 JavaScript 中使用 document 对象访问 Cookie?


使用 JavaScript,您可以轻松地使用“document.cookie”属性访问/读取 Cookie。由于 document.cookie 对象的值就是 Cookie 本身,因此读取 Cookie 与写入 Cookie 一样简单。

document.cookie 字符串将保留一个用分号分隔的名称=值对列表,其中名称是 Cookie 的名称,值是其字符串值。

在本文中,我们将学习如何在 JavaScript 中使用 document 对象访问 Cookie。

语法

document.cookie

返回值 - 所有 Cookie 都以单个字符串的形式保存在浏览器中。

document.cookie 字符串将保留一个用分号分隔的名称=值对列表,其中名称是 Cookie 的名称,值是其字符串值。

步骤

要使用其名称提取特定 Cookie,我们使用以下步骤。

  • 使用 document.cookie 属性获取所有 Cookie 字符串。

  • 使用 String.split( ) 方法在每个分号(“;”)处分割字符串,并将返回的数组存储在一个变量中。

  • 创建一个空的 Map( ) 来存储键值对。

  • 遍历数组,并在每次迭代中以“=”分割该元素,并将它的第 0 个索引设置为 Map 的键,第一个索引设置为 Map 的值,使用 Map.set ( key, value ) 方法。

  • 现在您在 Map( ) 中拥有每个 Cookie 的名称=值格式。

  • 从 Map( ) 中按名称检索所需的 Cookie。

示例

您可以尝试运行以下代码以了解如何在 JavaScript 中使用 document 对象访问 Cookie

<html>
   <head>
      <script>
         function ReadCookie() {
            var allcookies = document.cookie;
            document.write ("All Cookies : " + allcookies );
            
            // Get all the cookies pairs in an array
            cookiearray = allcookies.split(';');
            
            // Now take key value pair out of this array
            for(var i=0; i<cookiearray.length; i++) {
               name = cookiearray[i].split('=')[0];
               value = cookiearray[i].split('=')[1];
               document.write ("Key is : " + name + " and Value is : " + value);
            }
         }
      </script>
   </head>
      <body>
         <form name="myform" action="">
            <p> Click the following button to access the cookie:</p>
            <input type="button" value="Get Cookie" onclick="ReadCookie()"/>
         </form>
      </body>
</html>

示例

在此示例中,我们首先使用 document.cookie 方法设置一些 Cookie,然后我们使用上面描述的方法按名称检索 Cookie。

<!DOCTYPE html>
<html>
   <head>
      <title> How to access cookies using document object in JavaScript </title>
   </head>
   <body>
      <h2> Accessing cookies using document object in JavaScript </h2>
   </body>
   <script>

      // Set some cookie to the browser
      document.cookie = "firstname=Saurabh"
      document.cookie = "lastname=Jaiswal"
      document.cookie = "age=20"

      // Print the cookie string
      document.write( document.cookie + "  ")

      // firstname=Saurabh; lastname=Jaiswal; age=20
      // There can be another cookie also printed
      // if they are saved previously in your browser

      // Get the cookie and store in a variable
      let myCookies = document.cookie
      myCookies = "firstname=Saurabh;lastname=Jaiswal;age=20"

      // Split the cookie string at every semicolon
      myCookies = myCookies.split(";")

      // ['firstname=Saurabh', ' lastname=Jaiswal', ' age=20']
      // Create a map to store the cookies in key value Pair
      let cookies = new Map();

      // Loop through the myCookies array
      for( let cookie of myCookies ){

         // Split the elements at "="
         cookie = cookie.split( "=" )

         // Set the first element as key and second element as value
         cookies.set( cookie[0], cookie[1] )
      }
      // Retrive the cookies by its name
      document.write( cookies.get( "firstname" ) + "  ");
      document.write( cookies.get( "lastname" ) + "  );
      document.write( cookies.get( "age" ) + "  ");
   </script>
</html>

总之,JavaScript 允许您使用 document.cookie 属性访问和读取 Cookie。此属性返回一个包含保存在浏览器中的所有 Cookie 的字符串,每个 Cookie 都表示为一个用分号分隔的名称=值对。

要使用其名称提取特定 Cookie,您可以将 Cookie 字符串在每个分号处分割,创建一个 Map 对象来存储键值对,并遍历 Cookie 对数组,将第一个元素设置为键,第二个元素设置为 Map 中的值。然后,您可以从 Map 中按名称检索所需的 Cookie。此技术可用于在用户的浏览器中存储和检索信息,例如用户偏好或登录凭据。

更新于: 2023年1月6日

7K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告