How to Read Cookies in JavaScript: Which Solution is the Most Efficient and Cross-Browser Compatible?

Reading Cookies in JavaScript: Efficient and Cross-Browser Compatible Solution

When working with stand-alone JavaScript scripts, it's crucial to optimize code for size and reliability. A common task is reading cookies, which can be achieved using various methods. However, finding the shortest and most efficient solution can be challenging.

quirksmode.org's readCookie() Function

The QuirksMode.org readCookie() method is a popular choice but has limitations in terms of size and aesthetics.

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i <p><strong>jQuery.cookie's read_cookie() Function</strong></p><p>jQuery.cookie uses a more concise method that is also efficient:</p><pre class="brush:php;toolbar:false">function read_cookie(key)
{
    var result;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? (result[1]) : null;
}

Optimized Solution: getCookieValue() Function

However, a shorter, more reliable, and more performant solution is available:

const getCookieValue = (name) => (
  document.cookie.match('(^|;)\s*' + name + '\s*=\s*([^;]+)')?.pop() || ''
)

This function utilizes a regular expression to extract the value associated with the provided cookie name. It is faster and more concise than previous methods, as demonstrated in benchmarks:

https://jsben.ch/AhMN6

Notes on Approach

This regex method not only achieves the shortest function but also addresses potential inconsistencies in the document.cookie string. The official RFC 2109 indicates that whitespace after the semicolon is optional, and this approach accounts for that. It also handles whitespace before and after the equals sign, ensuring reliability in parsing cookie values.

The above is the detailed content of How to Read Cookies in JavaScript: Which Solution is the Most Efficient and Cross-Browser Compatible?. For more information, please follow other related articles on the PHP Chinese website!