JavaScript 如何解析HTTP Cookie头并返回所有cookie名称-值对的对象

Cookie 是一个简单的文本文件，由Web服务器发送到用户的浏览器。它们包含以下数据。

1. 实际数据的键值对。
2. cookie失效的到期日期。
3. 应发送到的服务器的域和路径。

方法： 要在JavaScript中检索所有存储的cookie，我们可以使用 document.cookie 属性，但是这个属性返回一个带有键值对由“;”分隔的单个字符串。如果我们能将键值对存储到一个对象中，那么检索过程将变得更容易。但是，JavaScript没有为这种情况提供任何方法，所以我们需要解决这个问题。

我们需要创建一个函数来解析cookie字符串并返回一个包含所有cookie的对象。这个过程非常简单，具体步骤如下：

1. 使用 string.split(“;”) 将cookie字符串分割为各个键值对。
2. 使用 string.split(“=”) 将每个键值对中的键和值分开。
3. 创建一个包含所有键值对的对象并返回该对象。

示例： 请查看以下代码中的注释，以更好地理解。

Javascript

<script> 
    function cookieParser(cookieString) { 
      
        // Return an empty object if cookieString 
        // is empty 
        if (cookieString === "") 
            return {}; 
      
        // Get each individual key-value pairs 
        // from the cookie string 
        // This returns a new array 
        let pairs = cookieString.split(";"); 
      
        // Separate keys from values in each pair string 
        // Returns a new array which looks like 
        // [[key1,value1], [key2,value2], ...] 
        let splittedPairs = pairs.map(cookie => cookie.split("=")); 
      
      
        // Create an object with all key-value pairs 
        const cookieObj = splittedPairs.reduce(function (obj, cookie) { 
      
            // cookie[0] is the key of cookie 
            // cookie[1] is the value of the cookie  
            // decodeURIComponent() decodes the cookie  
            // string, to handle cookies with special 
            // characters, e.g. ''. 
            // string.trim() trims the blank spaces  
            // auround the key and value. 
            obj[decodeURIComponent(cookie[0].trim())] 
                = decodeURIComponent(cookie[1].trim()); 
      
            return obj; 
        }, {}) 
      
        return cookieObj; 
    } 
      
    let dummyCookieString =  
        "username=John; gfg=GeeksForGeeks; foo=education"; 
      
    // Pass document.cookie to retrieve actual cookies 
    let cookieObj = cookieParser(dummyCookieString); 
      
    console.log(`cookie gfg has value{cookieObj['gfg']}.`); 
    console.log(`cookie foo has value ${cookieObj['foo']}.`); 
</script>

输出：

cookie gfg has value GeeksForGeeks.
cookie foo has value education.