คำอธิบายโดยละเอียดของคุกกี้ JavaScript

ภาพรวมคุกกี้

หากใช้เฟรมเวิร์กที่ไม่เปลี่ยนรูปแบบเพื่อจัดเก็บข้อมูลคอลัมน์การช็อปปิ้ง และหน้าแสดงผลิตภัณฑ์มีการเปลี่ยนแปลงอยู่ตลอดเวลา แม้ว่าจะสามารถบรรลุฟังก์ชันการจำลองตัวแปรร่วมได้ แต่ก็ไม่เข้มงวด ตัวอย่างเช่น หากคุณคลิกขวาในหน้ากรอบการนำทางแล้วคลิกคำสั่ง [รีเฟรช] ในเมนูทางลัด ตัวแปร JavaScript ทั้งหมดจะหายไป ดังนั้น ในการใช้ตัวแปรส่วนกลางแบบข้ามเพจที่เข้มงวด วิธีนี้ไม่สามารถทำได้ กลไกอื่นใน JavaScript คือ คุกกี้สามารถตอบสนองความต้องการของตัวแปรส่วนกลางที่แท้จริง

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

เบราว์เซอร์ที่ต่างกันใช้คุกกี้ต่างกัน แต่คุณสมบัติของคุกกี้จะเหมือนกัน ตัวอย่างเช่น ใน Windows 2000 และ Windows xp ไฟล์คุกกี้จะถูกจัดเก็บไว้ในโฟลเดอร์เอกสารและ settingsuserNamecookie รูปแบบการตั้งชื่อปกติคือ: [email protected]

กลไกคุกกี้จัดเก็บข้อมูลไว้ในฮาร์ดไดรฟ์ของผู้ใช้ ดังนั้นจึงสามารถใช้เป็นตัวแปรร่วมได้ นี่เป็นหนึ่งในข้อได้เปรียบที่ใหญ่ที่สุด มันสามารถใช้ได้ในสถานการณ์ต่อไปนี้

1. บันทึกสถานะการเข้าสู่ระบบของผู้ใช้ ตัวอย่างเช่น ID ผู้ใช้จะถูกจัดเก็บไว้ในคุกกี้เพื่อให้ผู้ใช้ไม่จำเป็นต้องเข้าสู่ระบบอีกครั้งเมื่อเขาเยี่ยมชมเพจในครั้งต่อไป ขณะนี้ฟอรัมและชุมชนหลายแห่งมีฟังก์ชันนี้ คุกกี้ยังสามารถตั้งเวลาหมดอายุได้ เมื่อหมดเวลา คุกกี้จะหายไปโดยอัตโนมัติ ดังนั้น ระบบมักจะแจ้งให้ผู้ใช้เข้าสู่ระบบต่อไป: ตัวเลือกทั่วไปคือ หนึ่งเดือน, สามเดือน, หนึ่งปี เป็นต้น

2. ติดตามพฤติกรรมผู้ใช้ ตัวอย่างเช่น เว็บไซต์พยากรณ์อากาศสามารถแสดงสภาพอากาศในท้องถิ่นตามพื้นที่ที่ผู้ใช้เลือก หากต้องเลือกสถานที่ทุกครั้งจะยุ่งยากเมื่อใช้คุกกี้ ระบบจะจดจำพื้นที่ที่เข้าชมครั้งล่าสุดโดยอัตโนมัติ ผู้ใช้คนสุดท้าย สภาพอากาศในพื้นที่ของคุณ เนื่องจากทุกอย่างทำในพื้นหลัง เพจดังกล่าวจึงเหมือนกับว่าได้รับการปรับแต่งสำหรับผู้ใช้บางรายและสะดวกต่อการใช้งานมาก

3. ปรับแต่งหน้า หากเว็บไซต์มีฟังก์ชั่นการเปลี่ยนสกินหรือเลย์เอาต์ ก็สามารถใช้คุกกี้เพื่อบันทึกตัวเลือกของผู้ใช้ เช่น สีพื้นหลัง ความละเอียด ฯลฯ เมื่อผู้ใช้เข้าชมครั้งถัดไป รูปแบบอินเทอร์เฟซของการเข้าชมครั้งล่าสุดยังคงสามารถบันทึกได้

4. สร้างตะกร้าสินค้า เช่นเดียวกับในตัวอย่างก่อนหน้านี้ คุกกี้ใช้เพื่อบันทึกสินค้าที่ผู้ใช้จำเป็นต้องซื้อ และสามารถส่งได้เหมือนกันในระหว่างขั้นตอนการชำระเงิน ตัวอย่างเช่น Taobao ใช้คุกกี้เพื่อบันทึกผลิตภัณฑ์ที่ผู้ใช้เรียกดูเพื่อให้สามารถเปรียบเทียบได้ตลอดเวลา

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

1. คุกกี้อาจถูกปิดใช้งาน เมื่อผู้ใช้ให้ความสำคัญกับการปกป้องความเป็นส่วนตัว เขามีแนวโน้มที่จะปิดการใช้งานฟังก์ชันคุกกี้ของเบราว์เซอร์

2. คุกกี้เกี่ยวข้องกับเบราว์เซอร์ ซึ่งหมายความว่าแม้ว่าคุณจะเข้าชมหน้าเดียวกัน คุกกี้ที่บันทึกโดยเบราว์เซอร์ที่แตกต่างกันก็ไม่สามารถเข้าถึงได้จากกัน

3. คุกกี้อาจถูกลบ เนื่องจากคุกกี้แต่ละตัวเป็นไฟล์ในฮาร์ดดิสก์ ผู้ใช้จึงมีแนวโน้มที่จะถูกลบออก

4. ความปลอดภัยของคุกกี้ไม่สูงพอ คุกกี้ทั้งหมดจะถูกบันทึกเป็นไฟล์ในรูปแบบข้อความธรรมดา ดังนั้นหากคุณต้องการบันทึกชื่อผู้ใช้ รหัสผ่าน และข้อมูลอื่น ๆ ทางที่ดีควรเข้ารหัสไว้ล่วงหน้า

ตั้งค่าคุกกี้

/ค่า

คุณสามารถกำหนดสตริงต่อไปนี้ให้กับ document.cookie:

document.cookie=”userId=828″;

แยกด้วยช่องว่าง (;) เช่น

document.cookie=”userId=828; userName=hulk”;

เครื่องหมายจุลภาค (,) และเครื่องหมายเท่ากับ (=) ไม่สามารถใช้ในชื่อคุกกี้หรือค่าได้ และช่องว่าง การทำเช่นนี้เป็นเรื่องง่ายในชื่อของคุกกี้ แต่ไม่ได้กำหนดค่าที่จะบันทึก จะเก็บค่าเหล่านี้ได้อย่างไร? วิธีการคือการใช้ฟังก์ชัน Escape() เพื่อเข้ารหัส ซึ่งสามารถใช้การแสดงสัญลักษณ์พิเศษบางอย่างในรูปแบบเลขฐานสิบหกได้ ตัวอย่างเช่น ช่องว่างจะถูกเข้ารหัสเป็น "20%" ซึ่งสามารถเก็บไว้ในค่าคุกกี้ได้ และการใช้โซลูชันนี้สามารถ ยังหลีกเลี่ยงการเกิดขึ้นของตัวอักษรจีนที่อ่านไม่ออก ตัวอย่างเช่น:

document.cookie="+escape("I love ajax");

เทียบเท่ากับ:

document.cookie="str=I%20love%20ajax";

เมื่อใช้การเข้ารหัส Escape() จำเป็นหลังจากการดึงข้อมูล ค่า ใช้ unescape() เพื่อถอดรหัสเพื่อให้ได้ค่าคุกกี้ดั้งเดิมซึ่งเคยมีการแนะนำมาก่อน

แม้ว่า document.cookie จะดูเหมือนเป็นคุณสมบัติและสามารถกำหนดค่าที่แตกต่างกันได้ แต่แตกต่างจากคุณลักษณะทั่วไป การเปลี่ยนการกำหนดไม่ได้หมายความว่าสูญเสียค่าเดิม ตัวอย่างเช่น การดำเนินการสองคำสั่งต่อไปนี้อย่างต่อเนื่อง:

document.cookie

=”userId=828″;

document.cookie=”userName=hulk”;

ในครั้งนี้ เบราว์เซอร์จะคงคุกกี้ไว้สองตัว ได้แก่ userId และ userName ดังนั้นการกำหนดค่าให้กับ document.cookie จึงเหมือนกับการรันคำสั่งในลักษณะนี้:

document.addCookie("userId=828");

document.addCookie("userName= hulk" );

อันที่จริงเบราว์เซอร์จะตั้งค่าคุกกี้ในลักษณะนี้ หากคุณต้องการเปลี่ยนค่าของคุกกี้ คุณเพียงแค่ต้องกำหนดใหม่เท่านั้น เช่น:

document.cookie="userId=929";

สิ่งนี้จะเปลี่ยนค่าของคุกกี้ คุกกี้ชื่อ userId ค่านี้ตั้งไว้ที่ 929

รับค่าของคุกกี้

ข้อมูลต่อไปนี้จะอธิบายวิธีการรับค่าของคุกกี้ สามารถรับค่าของคุกกี้ได้โดยตรงจาก document.cookie:

var strCookie=document.cookie;

ซึ่งจะได้รับสตริงที่ประกอบด้วยคู่ชื่อ/ค่าหลายคู่คั่นด้วยเครื่องหมายอัฒภาค คุกกี้ทั้งหมด

ในการพัฒนาจริง คุกกี้มักจะต้องได้รับการบันทึกเป็นเวลานาน เช่น การบันทึกสถานะการเข้าสู่ระบบของผู้ใช้ ซึ่งสามารถทำได้โดยใช้ตัวเลือกต่อไปนี้:

document.cookie=”userId=828; หมดอายุ=GMT_String”;
ในหมู่พวกเขา GMT_String เป็นสตริงเวลาที่แสดงในรูปแบบ GMT คำสั่งนี้ตั้งค่าคุกกี้ userId เป็นเวลาหมดอายุที่แสดงโดย GMT_String หลังจากเวลานี้คุกกี้จะหายไปและไม่สามารถเข้าถึงได้

การลบคุกกี้

หากต้องการลบคุกกี้ คุณสามารถตั้งเวลาหมดอายุให้เป็นเวลาในอดีตได้

ระบุเส้นทางที่สามารถเข้าถึงคุกกี้ได้ ตามค่าเริ่มต้น หากสร้างคุกกี้บนเพจ เพจอื่นๆ ในไดเร็กทอรีที่เพจนั้นก็จะสามารถเข้าถึงคุกกี้ได้เช่นกัน หากมีไดเร็กทอรีย่อยภายใต้ไดเร็กทอรีนี้ คุณสามารถเข้าถึงได้ในไดเร็กทอรีย่อยด้วย ตัวอย่างเช่น คุกกี้ที่สร้างใน www.xxxx.com/html/a.html สามารถเข้าถึงได้โดย www.xxxx.com/html/b.html หรือ www.xxx.com/html/some/c.html แต่ไม่สามารถเข้าถึงได้ เข้าถึงได้ทาง www.xxxx.com/d.html

คุกกี้

สามารถเข้าถึงได้ คุณต้องใช้พารามิเตอร์พาธเพื่อตั้งค่าคุกกี้ดังนี้:

document.cookie="name=value; path=cookieDir";

สามารถเข้าถึงได้ ตัวอย่างเช่น:

document.cookie="userId=320; path=/shop";

หมายความว่าคุกกี้ปัจจุบันสามารถใช้ได้เฉพาะในไดเร็กทอรีร้านค้าเท่านั้น

หากคุณต้องการให้คุกกี้ใช้งานได้ทั่วทั้งเว็บไซต์ คุณสามารถระบุ cookie_dir เป็นไดเร็กทอรีรากได้ เช่น

document.cookie="userId=320; path=/";

การระบุชื่อโฮสต์ที่สามารถเข้าถึงคุกกี้

จะคล้ายกับ เส้นทาง ชื่อโฮสต์อ้างอิงถึงโฮสต์ที่แตกต่างกันภายใต้โดเมนเดียว เช่น

www.google.com และ gmail.google.com เป็นชื่อโฮสต์ที่แตกต่างกันสองชื่อ ตามค่าเริ่มต้น คุกกี้ที่สร้างบนโฮสต์หนึ่งไม่สามารถเข้าถึงได้บนโฮสต์อื่น แต่สามารถควบคุมได้ผ่านพารามิเตอร์โดเมน รูปแบบไวยากรณ์คือ:

document.cookie="name=value; domain=cookieDomain" ";

ใช้ Google เป็นตัวอย่าง เพื่อให้เข้าถึงข้ามโฮสต์ได้ คุณสามารถเขียน:

document.cookie="name=value;domain=.google.com";

ด้วยวิธีนี้ โฮสต์ทั้งหมดภายใต้ google.com จะสามารถเข้าถึงคุกกี้ได้

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

1. ตั้งค่าคุกกี้
ฟังก์ชั่น SetCookie (ชื่อ, ค่า, หมดอายุ, เส้นทาง, โดเมน, ปลอดภัย)
-
var expDays = หมดอายุ*24*60*60*1000;
var expDate = วันที่ใหม่ ();
expDate.setTime(expDate.getTime()+expDays);
var expString = ((หมดอายุ==null) ? “” : (”;expires="+expDate.toGMTString()))
var pathString = ((เส้นทาง==null) ? "" : (";path="+path))
var domainString = ((โดเมน==null) ? “” : (”;โดเมน="+โดเมน))
var SecureString = ((ปลอดภัย==จริง) ? “;ปลอดภัย” : “” )
document.cookie = ชื่อ + “=" + Escape (ค่า) + expString + pathString + domainString + SecureString;
}

2. รับค่าคุกกี้ของชื่อที่ระบุ:
ฟังก์ชั่น GetCookie (ชื่อ)
-
ผลลัพธ์ var = null;
var myCookie = document.cookie + ";";
var searchName = ชื่อ + "=";
var startOfCookie = myCookie.indexOf(ชื่อการค้นหา);
var endOfCookie;
ถ้า (startOfCookie != -1)
-
startOfCookie += searchName.length;
endOfCookie = myCookie.indexOf(";",startOfCookie);
ผลลัพธ์ = unescape(myCookie.substring(startOfCookie, endOfCookie));
-
ส่งคืนผลลัพธ์;
}

3. ลบคุกกี้ด้วยชื่อที่ระบุ:
ฟังก์ชั่น ClearCookie (ชื่อ)
-
var ThreeDays=3*24*60*60*1000;
var expDate = วันที่ใหม่ ();
expDate.setTime(expDate.getTime()-สามวัน);
document.cookie=name+”=;expires=”+expDate.toGMTString();
-