ความแตกต่างของ Cookie ,Session Storage และ Local Storage
หากคุณเป็นคนที่ทำงานด้าน Technology , Marketing หรือ Data คุณมักจะเจอกับคำถามเกี่ยวกับจังหวะและวิธีการเก็บข้อมูลที่สามารถนำมาใช้วัดผลเว็บไซต์ โดยเฉพาะคนที่ทำงานเกี่ยวกับเว็บไซต์และการเก็บข้อมูล เพื่อนำไปใช้งานด้านการตลาด และการวิเคราะห์หาวิธีการปรับปรุงเพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีมากยิ่งขึ้น
คำถามที่ผมเจอเป็นประจำเลยสำหรับการทำงานเกี่ยวกับ Website Tracking คือ เราสามารถเก็บข้อมูลอะไรได้บ้าง ข้อมูลที่เราเก็บนั้น Marketing สามารถเขียนสคริปต์บน Google Tag Manager ได้ไหม หรือประมาณว่าช่วยคุยกับทีม Software Engineer ให้ที อยากเก็บข้อมูลแบบนั้น เรื่องบางอย่างเราสามารถเข้าใจมันได้ แม้ว่าจะทำมันไม่ได้ก็ตาม อย่างน้อยการเริ่มทำความเข้าใจก็เป็นสิ่งที่ดี เราจะสามารถรู้ลิมิตว่าอะไรทำได้ และอาจจะทำไม่ได้บ้าง ประโยชน์ของการรู้เรื่องพวกนี้คือ ในอนาคตเราจะประเมินงานได้ทันทีที่เห็นการวางแผนเลยทีเดียว ประหยัดเวลาไปได้เยอะ
*ถ้าหากว่าคุณลืม คุณก็แค่กลับมาอ่านหน้าบทความนั้นบ่อย ๆ เหมือนที่คุณกำลังจะเซฟเรื่องนี้ลงในบุ๊กมาร์คของคุณ
1. Web Storage คืออะไร
Web Storage คือ ส่วนที่ทำให้เว็บเบราเซอร์สามารถเก็บข้อมูลของผู้ใช้งานได้ ในรูปแบบของ Key-value pairs โดยที่เราไม่จำเป็นจะต้องเก็บข้อมูลทุกอย่างลงบนฐานข้อมูลจริง ๆ และเราสามารถกำหนดได้ว่าจะให้ข้อมูลที่อยู่ใน Web Storage เปลี่ยนแปลงไปตามเงื่อนไข หรือหมดอายุ ได้ด้วยการเขียนโค้ดง่าย ๆ เพียงไม่กี่บรรทัด
ข้อมูลที่เราสามารถเก็บได้บน Web Storage สามารถเขียนให้ไปเก็บได้ทั้งหมด 3 ที่ ซึ่งมีความสามารถในการจัดเก็บข้อมูลต่างกัน
Cookie : สามารถเก็บข้อมูลการเข้าใช้งาน และกำหนดอายุของข้อมูลได้
Session Storage : สามารถเก็บข้อมูลเฉพาะช่วงเวลานึงที่มีการเปิดเบราเซอร์ จะถูกลบเมื่อปิดหน้าต่าง
Local Storage : ขนาดใหญ่ได้ ไม่เกิน 5 MB ไม่มีวันหมดอายุ และจะหายไปก็ต่อเมื่อถูกลบเท่านั้น
วิธีการดูข้อมูลเบื้องต้น ให้เปิด Browser แล้วคลิกขวาที่พื้นที่เปล่าในหน้าเว็บไซต์ แล้วเลือกคำสั่ง Inspect จากนั้นให้กดไปที่ Tab Application จากนั้นเราจะพบกับ Storage ทั้ง 3 แบบที่เราจะมาเรียนกันวันนี้
2. Cookie
Cookie คือ ข้อมูลขนาดเล็กที่เราสามารถกำหนดเงื่อนไขของการหมดอายุได้ โดยจะมีขนาดไม่เกิน 4 KB ต่อ Cookie ปัจจุบันในประเทศไทยได้มีการออกกฎหมาย PDPA ซึ่งมีผลต่อการเก็บคุกกี้ของเว็บไซต์ คล้ายๆกับนโยบาย GDPR ที่ทางยุโรปบังคับใช้มาแล้ว เพื่อคุ้มครองการเข้าถึงข้อมูลส่วนบุคคลและความเป็นส่วนตัวของผู้ใช้งาน
ทางนักพัฒนาจึงจำเป็นจะต้องทำ Cookie Consent Box เพื่อขอความยินยอมในการใช้ข้อมูลของผู้เข้าชมเว็บไซต์ โดยจะมีต้องมีการบอกวัตถุประสงค์การใช้งาน และมีตัวเลือกให้ผู้ใช้งานเลือกที่จะยอมรับ หรือไม่ยอมรับก็ได้
ปกติแล้ว Cookies มีอยู่ 2 ประเภทหลัก ๆ ดังนี้
1.Session Cookies : เปรียบเสมือนหน่วยความจำชั่วคราวของเว็บไซต์ ส่วนมากจะใช้ในกรณีระบุสถานะของผู้ใช้งานเมื่อมีการล็อกอิน หรือมีการเปลี่ยนแปลงค่าต่าง ๆ ที่นักพัฒนากำหนดไว้ โดยจะไม่ถูกบันทึกข้อมูลส่วนตัว ข้อมูลชุดนี้จะหายไปเมื่อเราปิดเบราเซอร์
2.Persistent Cookies : การเก็บข้อมูลไว้ในอุปกรณ์ผู้ใช้งานระหว่างเซสชัน และได้รับการออกแบบมาเพื่อจดจำการตั้งค่าของผู้ใช้งานในช่วงเวลาที่กำหนดไว้ ส่วนมากจะใช้เพื่อจดจำการตั้งค่าพื้นฐานของผู้ใช้งานเมื่อมีการใช้งานเว็บไซต์ ข้อมูลชุดนี้จะหายไปก็ต่อเมื่อถูกลบ หรือถึงระยะเวลาที่่กำหนดไว้
นอกจากนี้ เรายังสามารถแบ่งคุกกี้ตามประเภทการใช้งานได้อีกหลายรูปแบบ ดังต่อไปนี้
1.First-Party Cookies : คุกกี้ที่ใช้สำหรับการติดตามพฤติกรรมของผู้ใช้งานเมื่อมีการใช้งานเว็บไซต์ และช่วยระบุตัวตนให้กับ Analytics Tools สำหรับเจ้าของเว็บไซต์อย่าง Google Analytics 4 กรณีที่ผู้ใช้งานกลับเข้ามาที่เว็บไซต์อีกครั้ง เจ้าของเว็บจะรู้ว่าคุณเป็นคนเดิมที่เข้ามาเมื่อครั้งที่แล้ว และมีการใช้งานเว็บไซต์อย่างไรบ้าง
2.Third-Party Cookies : คุกกี้ที่อนุญาตให้บุคคลที่สาม สามารถเข้าถึงและแสดงโฆษณาต่อผู้เข้าชมเว็บไซต์ได้ โดยที่คุกกี้ประเภทนี้จะติดตามพฤติกรรมของเราในทุกๆ รูปแบบ เพื่อนำไปใช้ประโยชน์ทางการตลาด และเรามักจะเรียกคุกกี้ประเภทนี้ว่า Marketing Cookies สามารถยกตัวอย่างคุกกี้ประเภทนี้ เช่น Facebook Pixel , Tiktok Pixel , Google Tag เป็นต้น
3.Secure Cookies : คุกกี้ที่สามารถส่งผ่านการเชื่อมต่อแบบเข้ารหัสไว้แล้วเท่านั้น ซึ่งคุกกี้ตัวนี้จะช่วยปกป้องข้อมูลไม่ให้ถูกดักระหว่างทางได้ ใช้สำหรับข้อมูลที่ต้องการความปลอดภัยสูง
4.HTTP-Only Cookies : คุกกี้ประเภทนี้จะไม่สามารถเข้าถึงได้ด้วย Client-Side API เช่น Javascript และด้วยเหตุผลนี้ทำให้ Cookies นี้มีความปลอดภัยจากการโจมตีด้วย Cross-site Scripting (การฝังโค้ดที่มีอันตรายต่อเว็บไซต์โดยตรง) แต่ก็ยังสามารถถูกโจมตีด้วยเทคนิคอื่น ๆ ได้อย่างเช่น Cross-site tracing (XST) และ Cross-site request forgery (CSRF) ได้
5.Same-Site Cookies : คุกกี้ประเภทนี้ถูกพัฒนาขึ้นในมาปี 2016 เพื่อควบคุมการรับส่งค่าคุกกี้ระหว่างเว็บไซต์ โดยสามารถกำหนด Domain ที่เรียกใช้ Cookie และการเลือกกำหนดสิทธิ์ให้กับ Third-Party Cookie ที่ต้องการได้ โดยจะเพิ่มความสามารถในการป้องกัน Cross-site request forgery (CSRF) ปัจจุบันเว็บเบราเซอร์ยอดนิยม เช่น Google Chrome , Mozilla Firefox และ Microsoft Edge ก็ได้รองรับการทำงานของ Same-site Cookie อย่างสมบูรณ์แล้ว
คำสั่งในการเขียนคุกกี้ จะมีคำสั่งเพียงการใช้งานเฉพาะคำสั่ง document.cookie เท่านั้น แต่จะใช้วิธีการส่งค่าอื่น ๆ ที่กำหนดไปตาม Argument นอกจากนี้เรายังสามารถเขียนคำสั่งเพื่อสร้างวิธีในการดึงค่า Cookie ออกมาใช้งานได้ผ่านคำสั่ง Javascript ตามตัวอย่างด้านล่าง
document.cookie = "username=Soranat; expires=Sat, 29 Mar 2025 00:00:00 UTC; path=/";
//กดดูที่ Cookies จะเห็นว่ามี Name = 'username' และ value เท่ากับ 'Soranat'
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//function สำหรับการเรียกดู Cookie สามารถใช้ได้โดยการพิมพ์ getCookie("username")
getCookie("username")
//output : "Soranat"
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
//สามารถลบ Cookies ได้โดยการตั้งวันหมดอายุย้อนหลัง
**ไม่ควรบันทึกข้อมูลที่เป็นความลับลงเป็นตัวอักษรแบบไม่เข้ารหัส เราสามารถ Hash ข้อมูลประเภท Token เพื่อเก็บไว้ในคุกกี้สำหรับเรื่องที่จำเป็นเท่านั้น
ข้อดี
- คุกกี้จะมีความสามารถในการจดจำพฤติกรรมของผู้ใช้งานได้ ทำให้เราไม่ต้องปรับตั้งค่าการเล่นเว็บไซต์ใหม่
- เมื่อมีการสร้าง Token สำหรับการเข้าสู่ระบบแล้ว เมื่อปิดเบราเซอร์ไป พอกลับเข้ามาอีกครั้งจะสามารถใช้งานได้
- คุกกี้ทำให้นักการตลาดสามารถหา Insight จากข้อมูล Web Analytics เพื่อวางแผนโฆษณาได้ดียิ่งขึ้น
ข้อเสีย
- คุกกี้บางตัวมีไว้เพื่อสอดส่องพฤติกรรมของเรา ทำให้เราโดนยิงโฆษณาง่ายขึ้นกว่าเมื่อก่อน
- คุกกี้บางประเภทเรียกว่าคุกกี้ซอมบี้ ที่จะสร้างตัวเองไม่หยุดต่อให้เราลบก็จะสามารถสร้างใหม่ได้เรื่อย
- คุกกี้บางต่ออาจเป็นอันตรายต่อการใช้งานบัญชีต่าง ๆ ของผู้ใช้งานอาจจะมีไวรัส หรือสคริปต์ไม่พึงประสงค์ที่ถูกสร้างขึ้้นเพื่อโจมตีทั้งผู้ใช้งานและเจ้าของเว็บไซต์ได้
3. Session Storage
Session Storage คือการเก็บข้อมูลใน Storage แบบ ชั่วคราว ในรูปแบบของ Key-value Pair จะหายไปเมื่อเราทำการปิดเบราเซอร์หรือระยะเวลาหมดอายุ มีขนาดไม่เกิน 5-10 MB โดยที่ข้อมูลเหล่านี้จะไม่ถูกส่งไปยัง Server สามารถนำข้อมูลมาแสดงได้ด้วย Client API อย่าง Javascript คำสั่งของ sessionStorage มีทั้งหมด 4 คำสั่ง
1. sessionStorage.setItem( key , value ) : ใช้สำหรับการบันทึกค่าลงใน Storage โดยระบุคีย์ และค่าที่ต้องการจะเก็บ
2. sessionStorage.getItem( key ) : ใช้สำหรับการนำข้อมูลออกมาแสดงผล โดยระบุคีย์
3. sessionStorage.removeItem( key ) : ใช้สำหรับการลบข้อมูลด้วยการระบุคีย์
4. sessionStorage.clear() : ใช้สำหรับการล้างข้อมูลใน sessionStorage ทั้งหมด
ตัวอย่างของการเก็บข้อมูลใน sessionStorage เช่น เราต้องการจำเก็บข้อมูล UTM Parameter ไว้ใช้สำหรับบันทึกข้อมูล Lead ลง Database เราสามารถเขียนโค้ดเพื่อดึงค่า UTM Parameter ที่ปรากฏในหน้าแรกเมื่อลูกค้าเข้ามาที่เว็บไซต์ แล้วเก็บไว้ เมื่อผู้ใช้งานเล่นเว็บไซต์ไปเรื่อยๆ และถึงจังหวะที่ต้องลงทะเบียน เราสามารถนำข้อมูลเหล่านี้ส่งไปพร้อมกับ form data ได้
sessionStorage.setItem( "utm_source" , "google" )
//output : สร้างตัวแปร utm_source ที่มีค่า "google" ใน Session Storage
sessionStorage.setItem( "utm_medium" , "cpc" )
//output : สร้างตัวแปร utm_medium ที่มีค่า "cpc" ใน Session Storage
sessionStorage.setItem( "utm_campaign" , "sem" )
//output : สร้างตัวแปร utm_campaign ที่มีค่า "sem" ใน Session Storage
sessionStorage.getItem( "campaign" )
//output : "sem"
sessionStorage.removeItem( "campaign" )
//output : ลบค่าของตัวแปร campaign ซึ่งก็คือ sem ในบรรทัดที่แล้ว
sessionStorage.clear()
//output : ลบค่าทั้งหมดใน sessionStorage
**ไม่ควรบันทึกข้อมูลที่เป็นความลับลงเป็นตัวอักษรแบบไม่เข้ารหัส เราสามารถ Hash ข้อมูลประเภท Token เพื่อเก็บไว้ในคุกกี้สำหรับเรื่องที่จำเป็นเท่านั้น
ข้อดี
- สามารถกำหนดระยะเวลาหมดอายุของข้อมูลได้
- เป็นที่นิยมเพราะใช้งานง่ายกว่า Cookie
- ลดการส่งข้อมูลไป-กลับระหว่าง Client กับ Server
- มีขนาดสูงสุด 10 MB (แล้วแต่ Browser)
ข้อเสีย
- ข้อมูลจะหายไปตอนที่ผู้ใช้งานปิดเบราเซอร์
- สามารถบันทึกได้เพียงตัวอักษรเท่านั้น
- ไม่ปลอดภัยสำหรับการเก็บชื่อ รหัสผู้ใช้งาน รวมถึงข้อมูลที่เป็นความลับ
4. Local Storage
Local Storage คือ การเก็บข้อมูลใน Storage แบบถาวร ในรูปแบบของ Key-value Pair ไม่มีวันหมดอายุ ยกเว้นแต่จะถูกลบโดยผู้ใช้งาน ข้อมูลเหล่านี้จะไม่ถูกส่งไปยัง Server สามารถนำข้อมูลมาแสดงได้ด้วย Client API อย่าง Javascript มีขนาดไม่เกิน 5-10 MB และใช้คำสั่งเช่นเดียวกันกับ Session Storage แค่เปลี่ยนจาก sessionStorage เป็น localStorage เท่านั้น
1. localStorage.setItem( key , value ) : ใช้สำหรับการบันทึกค่าลงใน Storage โดยระบุคีย์ และค่าที่ต้องการจะเก็บ
2. localStorage.getItem( key ) : ใช้สำหรับการนำข้อมูลออกมาแสดงผล โดยระบุคีย์
3. localStorage.removeItem( key ) : ใช้สำหรับการลบข้อมูลด้วยการระบุคีย์
4. localStorage.clear() : ใช้สำหรับการล้างข้อมูลใน sessionStorage ทั้งหมด
ตัวอย่างของการเก็บข้อมูลใน localStorage เช่น เราต้องการกำหนดรหัสผู้ใช้งานโดยแบ่งตามอุปกรณ์ที่เข้าใช้งาน เป็นหนึ่งวิธีที่ Customer Data Platform หลายๆเจ้าใช้ในการช่วยระบุตัวตน (ID Resolution) เมื่อมีการบันทึกข้อมูลบางอย่างลง localStorage แล้ว ข้อมูลชุดนั้นจะอยู่กับอุปกรณ์ดังกล่าวตลอดไป จนกว่าจะมีการลบข้อมูลออก
sessionStorage.setItem( "device_idx" , "BVdis4781sWtCsas" )
//output : สร้างตัวแปร device_idx ที่มีค่า "BVdis4781sWtCsas" ใน Local Storage
sessionStorage.getItem( "device_idx" )
//output : "BVdis4781sWtCsas"
sessionStorage.removeItem( "device_idx" )
//output : ลบค่าของตัวแปร device_idx ซึ่งก็คือ BVdis4781sWtCsas ในบรรทัดที่แล้ว
sessionStorage.clear()
//output : ลบค่าทั้งหมดใน Local Storage
ข้อดี
- ข้อมูลไม่มีวันหมดอายุ จนกว่าจะถูกลบ หรือเคลียร์ความจำคอมพิวเตอร์
- มีขนาดสูงสุด 10 MB (แล้วแต่ Browser)
- ข้อมูลจะไม่ถูกส่งไปยัง Server
ข้อเสีย
- ข้อมูลที่เก็บไว้ไม่ปลอดภัย
- ถูกอ่านได้ผ่าน Client side เท่านั้น ไม่สามารถอ่านด้วย Server side ได้
5. สรุปเนื้อหา
เราสามารถเก็บข้อมูลผู้ใช้งานในฝั่ง Browser (Client Side) ได้ทั้งหมด 3 วิธี ด้วยการใช้ Cookie , sessionStorage และ localStorage
Cookie เอาไว้สำหรับเก็บข้อมูลที่เราต้องนำไปใช้ในการทำงานทั้งฝั่ง Software Engineer , Analytics และ งานสาย Marketing อย่างการทำ Remarketing Tag
Session Storage เหมาะสำหรับการเก็บค่าเฉพาะในเซสชั่นที่ผู้ใช้งานกำลังเข้าเว็บไซต์อยู่ หรือการเก็บค่าระหว่างหน้าเพจในเว็บไซต์เราส่งไปให้หน้าอื่นแบบง่าย ๆ
Local Storage เหมาะสำหรับข้อมูลที่เราต้องการฝังไว้ในอุปกรณ์เครื่องนั้นแบบถาวร ไม่หายไปแม้ว่าเบราเซอร์จะถูกปิดไปแล้วก็ตาม
อย่างไรก็ตามเราไม่ควรจะเก็บข้อมูลส่วนบุคคล หรือข้อมูลที่เป็นความลับด้วยทั้ง 3 วิธี แม้ว่าปัจจุบันจะมีการใช้วิธีการเข้ารหัสก็ตาม สุดท้ายแล้วการเลือกใช้ Cookie , sessionStorage หรือ localStorage นั้นขึ้นอยู่กับสถานการณ์ที่เราต้องการกำหนดตามแอพพลิเคชั่นที่พัฒนาไว้ โดยคำนึงถึงเรื่องความปลอดภัยจากการโจมตีของผู้ไม่ประสงค์ดีเป็นหลัก
Share your experience with this Blog
