ฟังก์ชั่นที่สั้นที่สุดสำหรับการอ่านคุกกี้ตามชื่อใน JavaScript คืออะไร?

วิธีที่ใช้งานร่วมกันได้สั้นที่สุดถูกต้องและข้ามเบราว์เซอร์สำหรับการอ่านคุกกี้ใน JavaScript คืออะไร

บ่อยครั้งในขณะที่สร้างสคริปต์แบบสแตนด์อโลน (ที่ฉันไม่สามารถอ้างอิงภายนอกได้) ฉันพบว่าตัวเองเพิ่มฟังก์ชั่นสำหรับอ่านคุกกี้และมักจะถอยกลับไปที่วิธีQuirksMode.orgreadCookie() (280 ไบต์, 216 minified)

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

มันทำงานได้ แต่น่าเกลียดและเพิ่มจำนวนบิตในแต่ละครั้ง

วิธีการที่jQuery.cookieใช้บางอย่างเช่นนี้ (แก้ไขแล้ว, 165 ไบต์, 125 ลดขนาด):

function read_cookie(key)
{
    var result;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? (result[1]) : null;
}

โปรดทราบว่านี่ไม่ใช่การแข่งขัน 'รหัสกอล์ฟ': ฉันสนใจที่จะลดขนาดของฟังก์ชั่น readCookie ของฉันอย่างถูกต้องและเพื่อให้มั่นใจว่าโซลูชันที่ฉันมีนั้นถูกต้อง

สั้นกว่าน่าเชื่อถือและมีประสิทธิภาพมากกว่าคำตอบที่ได้รับคะแนนดีที่สุดในปัจจุบัน:

function getCookieValue(a) {
    var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
    return b ? b.pop() : '';
}

การเปรียบเทียบประสิทธิภาพของวิธีการต่างๆนั้นแสดงไว้ที่นี่:

http://jsperf.com/get-cookie-value-regex-vs-array-functions

หมายเหตุเกี่ยวกับวิธีการ:

วิธีการ regex ไม่เพียง แต่เร็วที่สุดในเบราว์เซอร์ส่วนใหญ่เท่านั้น แต่ยังให้ฟังก์ชันที่สั้นที่สุดอีกด้วย นอกจากนี้ควรชี้ให้เห็นว่าตามสเป็คอย่างเป็นทางการ (RFC 2109)พื้นที่หลังเซมิโคลอนที่คั่นคุกกี้ใน document.cookie เป็นทางเลือกและอาร์กิวเมนต์สามารถทำให้ไม่ควรเป็นที่พึ่ง นอกจากนี้ช่องว่างที่ได้รับอนุญาตก่อนและหลังเครื่องหมายเท่ากับ (=) และการโต้แย้งอาจทำให้ช่องว่างที่อาจเกิดขึ้นนี้ควรถูกรวมเข้ากับ document.cookie parser ที่เชื่อถือได้ Regex ด้านบนบัญชีสำหรับเงื่อนไขช่องว่างทั้งสองข้างต้น

นี้จะตี document.cookie ครั้งเดียวเท่านั้น ทุกคำขอที่ตามมาจะเป็นทันที

(function(){
    var cookies;

    function readCookie(name,c,C,i){
        if(cookies){ return cookies[name]; }

        c = document.cookie.split('; ');
        cookies = {};

        for(i=c.length-1; i>=0; i--){
           C = c[i].split('=');
           cookies[C[0]] = C[1];
        }

        return cookies[name];
    }

    window.readCookie = readCookie; // or expose it however you want
})();

ฉันเกรงว่าจะไม่มีวิธีที่เร็วกว่าตรรกะทั่วไปนี้เว้นแต่คุณจะมีอิสระในการใช้งาน .forEachซึ่งขึ้นอยู่กับเบราว์เซอร์ (แม้ว่าคุณจะไม่ได้ประหยัดมากนัก)

ตัวอย่างของคุณเองบีบอัดเล็กน้อยเพื่อ120 bytes:

function read_cookie(k,r){return(r=RegExp('(^|; )'+encodeURIComponent(k)+'=([^;]*)').exec(document.cookie))?r[2]:null;}

คุณสามารถไปถึงได้110 bytesหากคุณตั้งชื่อฟังก์ชั่น 1 ตัวอักษร90 bytesถ้าคุณวางencodeURIComponentถ้าคุณวาง

ฉันได้ลงไป73 bytesแล้ว แต่เพื่อความยุติธรรมมันจะ82 bytesตั้งชื่อเมื่อreadCookieและ102 bytesเมื่อเพิ่มencodeURIComponent:

function C(k){return(document.cookie.match('(^|; )'+k+'=([^;]*)')||0)[2]}

สมมติฐาน

จากคำถามที่ฉันเชื่อว่าสมมติฐาน / ข้อกำหนดสำหรับฟังก์ชั่นนี้รวมถึง:

• มันจะถูกใช้เป็นฟังก์ชั่นห้องสมุดและตั้งใจที่จะทิ้งลงในโค้ดฐาน
• ดังนั้นจะต้องทำงานในสภาพแวดล้อมที่แตกต่างกันเช่นทำงานกับรหัส JS ดั้งเดิม CMSes คุณภาพระดับต่างๆ ฯลฯ
• การระหว่างงานกับโค้ดที่เขียนโดยคนอื่น ๆ และ / หรือรหัสที่คุณไม่สามารถควบคุมฟังก์ชั่นไม่ควรทำให้สมมติฐานใด ๆ ในการชื่อหรือค่าคุกกี้จะถูกเข้ารหัส การเรียกฟังก์ชันด้วยสตริง"foo:bar[0]"ควรส่งคืนคุกกี้ (ตามตัวอักษร) ชื่อ "foo: bar [0]";
• อาจมีการเขียนคุกกี้ใหม่และ / หรือคุกกี้ที่มีอยู่ซึ่งแก้ไขได้ทุกช่วงอายุของหน้าเว็บ

ภายใต้สมมติฐานเหล่านี้เป็นที่ชัดเจนว่าencodeURIComponent/ decodeURIComponent ไม่ควรใช้ ; การทำเช่นนั้นจะถือว่ารหัสที่ตั้งค่าคุกกี้นั้นเข้ารหัสด้วยฟังก์ชั่นเหล่านี้

วิธีการแสดงออกปกติได้รับปัญหาหากชื่อคุกกี้สามารถมีอักขระพิเศษ jQuery.cookie แก้ไขปัญหานี้โดยการเข้ารหัสชื่อคุกกี้ (อันที่จริงทั้งชื่อและค่า) เมื่อเก็บคุกกี้และถอดรหัสชื่อเมื่อดึงคุกกี้ วิธีแก้ปัญหาการแสดงออกปกติอยู่ด้านล่าง

นอกจากว่าคุณจะอ่านเฉพาะคุกกี้ที่คุณควบคุมอย่างสมบูรณ์ก็จะแนะนำให้อ่านคุกกี้document.cookieโดยตรงและไม่แคชผลลัพธ์เนื่องจากไม่มีวิธีที่จะทราบว่าแคชไม่ถูกต้องหากไม่อ่านdocument.cookieอีกครั้ง

(ในขณะที่การเข้าถึงและการแยกวิเคราะห์document.cookiesจะช้ากว่าการใช้แคชเล็กน้อยมันจะไม่ช้าเท่ากับการอ่านส่วนอื่น ๆ ของ DOM เนื่องจากคุกกี้ไม่มีบทบาทในต้นไม้ DOM / การแสดงผล)

ฟังก์ชั่นแบบวนซ้ำ

ต่อไปนี้เป็นคำตอบของ Code Golf ซึ่งขึ้นอยู่กับฟังก์ชั่นของ PPK (ตามวง):

function readCookie(name) {
    name += '=';
    for (var ca = document.cookie.split(/;\s*/), i = ca.length - 1; i >= 0; i--)
        if (!ca[i].indexOf(name))
            return ca[i].replace(name, '');
}

ซึ่งเมื่อย่อเล็กสุดมาที่ 128 ตัวอักษร (ไม่นับชื่อฟังก์ชั่น):

function readCookie(n){n+='=';for(var a=document.cookie.split(/;\s*/),i=a.length-1;i>=0;i--)if(!a[i].indexOf(n))return a[i].replace(n,'');}

ฟังก์ชั่นการแสดงออกตามปกติ

อัปเดต:หากคุณต้องการโซลูชันนิพจน์ทั่วไป:

function readCookie(name) {
    return (name = new RegExp('(?:^|;\\s*)' + ('' + name).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&') + '=([^;]*)').exec(document.cookie)) && name[1];
}

นี้หนีตัวอักษรพิเศษใด ๆ ในชื่อคุกกี้ก่อนที่จะสร้างวัตถุ RegExp ลดขนาดมาที่ 134 ตัวอักษร (ไม่นับชื่อฟังก์ชั่น):

function readCookie(n){return(n=new RegExp('(?:^|;\\s*)'+(''+n).replace(/[-[\]{}()*+?.,\\^$|#\s]/g,'\\$&')+'=([^;]*)').exec(document.cookie))&&n[1];}

ในขณะที่ Rudu และ cwolves ได้ชี้ให้เห็นในความคิดเห็น regex นิพจน์ทั่วไปที่หลบหนีสามารถทำให้สั้นลงได้โดยตัวละครไม่กี่ตัว ฉันคิดว่ามันจะเป็นการดีถ้าให้ regex ที่หลบหนีสอดคล้องกัน (คุณอาจใช้มันที่อื่น) แต่คำแนะนำของพวกเขานั้นคุ้มค่าที่จะพิจารณา

หมายเหตุ

ทั้งสองฟังก์ชั่นเหล่านี้จะไม่จัดการnullหรือundefinedถ้ามีคุกกี้ชื่อ "null" readCookie(null)จะส่งคืนค่าของมัน หากคุณต้องการจัดการกรณีนี้ให้ปรับรหัสให้เหมาะสม

รหัสจาก google analytics ga.js

function c(a){
    var d=[],
        e=document.cookie.split(";");
    a=RegExp("^\\s*"+a+"=\\s*(.*?)\\s*$");
    for(var b=0;b<e.length;b++){
        var f=e[b].match(a);
        f&&d.push(f[1])
    }
    return d
}

แล้วอันนี้ละ?

function getCookie(k){var v=document.cookie.match('(^|;) ?'+k+'=([^;]*)(;|$)');return v?v[2]:null}

นับ 89 ไบต์โดยไม่มีชื่อฟังก์ชัน

ไปเลย .. ไชโย!

function getCookie(n) {
    let a = `; ${document.cookie}`.match(`;\\s*${n}=([^;]+)`);
    return a ? a[1] : '';
}

โปรดทราบว่าฉันใช้ประโยชน์จากเทมเพลตสตริงของ ES6 เพื่อสร้างการแสดงออก regex

สิ่งนี้ในวัตถุที่คุณสามารถอ่านเขียนทับเขียนทับและลบคุกกี้

var cookie = {
    write : function (cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    },
    read : function (name) {
        if (document.cookie.indexOf(name) > -1) {
            return document.cookie.split(name)[1].split("; ")[0].substr(1)
        } else {
            return "";
        }
    },
    delete : function (cname) {
        var d = new Date();
        d.setTime(d.getTime() - 1000);
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=; " + expires;
    }
};

ฟังก์ชั่นทั้งสองนี้ใช้ได้อย่างเท่าเทียมกันในแง่ของการอ่านคุกกี้ คุณสามารถโกนทิ้งได้สองสามไบต์ (และมันกำลังเข้าสู่ดินแดน Code Golf ที่นี่):

function readCookie(name) {
    var nameEQ = name + "=", ca = document.cookie.split(';'), i = 0, c;
    for(;i < ca.length;i++) {
        c = ca[i];
        while (c[0]==' ') c = c.substring(1);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length);
    }
    return null;
}

สิ่งที่ฉันทำคือการยุบประกาศตัวแปรทั้งหมดเป็นคำสั่ง var เดียวลบอาร์กิวเมนต์ที่สองที่ไม่จำเป็นในการเรียกไปยังสตริงย่อยและแทนที่การเรียก charAt หนึ่งรายการลงในการอ้างอิงอาร์เรย์

นี่ยังไม่สั้นเท่ากับฟังก์ชั่นที่สองที่คุณให้มา แต่แม้จะสามารถเอาออกไปสองสามไบต์:

function read_cookie(key)
{
    var result;
    return (result = new RegExp('(^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? result[2] : null;
}

ฉันเปลี่ยนนิพจน์ย่อยแรกในนิพจน์ทั่วไปให้เป็นนิพจน์ย่อยที่จับภาพและเปลี่ยนผลลัพธ์ [1] ส่วนเป็นผลลัพธ์ [2] ให้ตรงกับการเปลี่ยนแปลงนี้ ยังลบ parens ที่ไม่จำเป็นออกไปรอบ ๆ ผลลัพธ์ [2]

ในการลบการขยายตัวออกให้มากที่สุดให้ลองอย่าใช้ฟังก์ชั่น wrapper เลย:

try {
    var myCookie = document.cookie.match('(^|;) *myCookie=([^;]*)')[2]
} catch (_) {
    // handle missing cookie
}

ตราบใดที่คุณคุ้นเคยกับ RegEx รหัสนั้นก็สะอาดและอ่านง่าย

(แก้ไข: โพสต์เวอร์ชันที่ไม่ถูกต้องก่อน .. และรุ่นที่ไม่สามารถใช้งานได้ที่อัปเดตเป็นปัจจุบันซึ่งใช้ฟังก์ชัน unparam ที่เหมือนกับตัวอย่างที่สองมาก)

ความคิดที่ดีใน cwolves ตัวอย่างแรก ฉันสร้างทั้งสองอย่างสำหรับฟังก์ชั่นการอ่าน / เขียนคุกกี้ที่มีขนาดกะทัดรัดพอสมควรซึ่งสามารถใช้งานได้ในหลายโดเมนย่อย คิดว่าฉันจะแบ่งปันในกรณีที่มีคนอื่นวิ่งข้ามกระทู้นี้เพื่อหาสิ่งนั้น

(function(s){
  s.strToObj = function (x,splitter) {
    for ( var y = {},p,a = x.split (splitter),L = a.length;L;) {
      p = a[ --L].split ('=');
      y[p[0]] = p[1]
    }
    return y
  };
  s.rwCookie = function (n,v,e) {
    var d=document,
        c= s.cookies||s.strToObj(d.cookie,'; '),
        h=location.hostname,
        domain;
    if(v){
      domain = h.slice(h.lastIndexOf('.',(h.lastIndexOf('.')-1))+1);
      d.cookie = n + '=' + (c[n]=v) + (e ? '; expires=' + e : '') + '; domain=.' + domain + '; path=/'
    }
    return c[n]||c
  };
})(some_global_namespace)

• หากคุณผ่าน rwCookie ไปเลยมันจะได้รับคุกกี้ทั้งหมดไปยังที่เก็บคุกกี้
• ผ่าน rwCookie ชื่อคุกกี้ก็จะได้รับค่าของคุกกี้นั้นจากการจัดเก็บ
• ผ่านค่าคุกกี้แล้วจะเขียนคุกกี้และวางค่าในที่เก็บข้อมูล
• ค่าเริ่มต้นหมดอายุเป็นเซสชั่นเว้นแต่คุณจะระบุหนึ่ง

ใช้คำตอบของ cwolves แต่ไม่ได้ใช้การปิดหรือการแฮชที่คำนวณไว้ล่วงหน้า:

// Golfed it a bit, too...
function readCookie(n){
  var c = document.cookie.split('; '),
      i = c.length,
      C;

  for(; i>0; i--){
     C = c[i].split('=');
     if(C[0] == n) return C[1];
  }
}

... และการลดขนาด ...

function readCookie(n){var c=document.cookie.split('; '),i=c.length,C;for(;i>0;i--){C=c[i].split('=');if(C[0]==n)return C[1];}}

... เท่ากับ 127 ไบต์

นี่คือทางออกที่ง่ายที่สุดโดยใช้ฟังก์ชั่นสตริงจาวาสคริปต์

document.cookie.substring(document.cookie.indexOf("COOKIE_NAME"), 
                          document.cookie.indexOf(";", 
                          document.cookie.indexOf("COOKIE_NAME"))).
  substr(COOKIE_NAME.length);

ฟังก์ชั่นต่อไปนี้จะช่วยให้สามารถแยกแยะความแตกต่างระหว่างสตริงว่างและคุกกี้ที่ไม่ได้กำหนด คุกกี้ที่ไม่ได้กำหนดจะส่งคืนอย่างถูกต้องundefinedและไม่ใช่สตริงว่างซึ่งต่างจากคำตอบอื่น ๆ ที่นี่ แต่มันจะไม่ทำงานบน IE7 และที่ต่ำกว่าเนื่องจากมันไม่อนุญาตให้เข้าถึงอาร์เรย์ของดัชนีสตริง

    function getCookie(name) {
      return (document.cookie.match('(?:^|;) *'+name+'=([^;]*)')||"")[1];
    }