ข้อดีและข้อเสียทางเทคนิคของ localStorage, sessionStorage, เซสชันและคุกกี้คืออะไรและเมื่อใดฉันจะใช้อีกอันหนึ่ง

นี่เป็นคำถามขอบเขตกว้างมากและข้อดี / ข้อเสียจำนวนมากจะเป็นบริบทกับสถานการณ์

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

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

localStorage และ sessionStorage

localStorage และ sessionStorage เป็น API ที่ค่อนข้างใหม่ (หมายถึงไม่ใช่เบราว์เซอร์ดั้งเดิมทั้งหมดที่จะสนับสนุนพวกเขา) และใกล้เคียงกัน (ทั้งใน API และความสามารถ) ด้วยข้อยกเว้นเพียงอย่างเดียวของการคงอยู่ sessionStorage (ตามชื่อที่แนะนำ) จะใช้ได้เฉพาะช่วงเวลาของเซสชันเบราว์เซอร์ (และจะถูกลบเมื่อปิดแท็บหรือหน้าต่าง) - อย่างไรก็ตามจะโหลดหน้าเว็บใหม่ได้ (แหล่งคู่มือ DOM Storage - Mozilla Developer Network )

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

localStorage และ sessionStorage เหมาะสำหรับการเก็บรักษาข้อมูลที่ไม่ไวต่อความต้องการภายในสคริปต์ไคลเอนต์ระหว่างหน้า (ตัวอย่างเช่น: preferences, score in game) ข้อมูลที่เก็บไว้ใน localStorage และ sessionStorage สามารถอ่านหรือเปลี่ยนแปลงได้อย่างง่ายดายจากภายในไคลเอนต์ / เบราว์เซอร์ดังนั้นจึงไม่ควรใช้สำหรับการจัดเก็บข้อมูลที่สำคัญหรือเกี่ยวข้องกับความปลอดภัยภายในแอปพลิเคชัน

คุ้กกี้

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

ในด้านบวกคุกกี้สามารถมีระดับการป้องกันที่ใช้จากความเสี่ยงด้านความปลอดภัยเช่นการฉีดข้ามไซต์ (XSS) / สคริปต์โดยการตั้งค่าสถานะ HTTP เท่านั้นซึ่งหมายถึงเบราว์เซอร์ที่ทันสมัย ​​(สนับสนุน) จะป้องกันการเข้าถึงคุกกี้และค่าจาก JavaScript ( นี่จะเป็นการป้องกันไม่ให้ JavaScript ของคุณเองถูกกฎหมายเข้าถึง) นี้เป็นสิ่งสำคัญโดยเฉพาะอย่างยิ่งกับคุกกี้รับรองความถูกต้องซึ่งจะใช้ในการจัดเก็บรายละเอียดที่มีสัญลักษณ์ของผู้ใช้ที่ลงทะเบียน - ถ้าคุณมีสำเนาของคุกกี้ที่แล้วสำหรับ intents และวัตถุประสงค์ที่คุณจะกลายเป็นผู้ใช้รายนั้นเท่าที่แอพลิเคชันเว็บเป็น เกี่ยวข้องและมีการเข้าถึงข้อมูลและฟังก์ชันการทำงานที่ผู้ใช้มี

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

localStorage vs. sessionStorage vs. Cookies

ในแง่ของความสามารถคุกกี้ sessionStorage และ localStorage อนุญาตให้คุณจัดเก็บสตริงเท่านั้น - คุณสามารถแปลงค่าดั้งเดิมโดยปริยายเมื่อตั้งค่า (สิ่งเหล่านี้จะต้องถูกแปลงกลับเพื่อใช้เป็นชนิดหลังจากอ่าน) แต่ไม่ใช่ Object หรือ Array (เป็นไปได้ที่ JSON จะทำให้เป็นอนุกรมเพื่อจัดเก็บโดยใช้ API) ที่เก็บข้อมูลเซสชันโดยทั่วไปจะช่วยให้คุณสามารถเก็บดั้งเดิมหรือวัตถุใด ๆ ที่สนับสนุนโดยภาษา / กรอบการทำงานด้านเซิร์ฟเวอร์ของคุณ

ฝั่งไคลเอ็นต์กับฝั่งเซิร์ฟเวอร์

เนื่องจาก HTTP เป็นโปรโตคอลไร้สัญชาติ - เว็บแอปพลิเคชันไม่มีวิธีระบุผู้ใช้จากการเข้าชมก่อนหน้านี้เมื่อกลับมาที่เว็บไซต์ - ข้อมูลเซสชันมักอาศัยโทเค็นคุกกี้เพื่อระบุผู้ใช้สำหรับการเข้าชมซ้ำ (แม้ว่าอาจใช้พารามิเตอร์ URL น้อย จุดประสงค์เดียวกัน) ข้อมูลมักจะมีช่วงเวลาที่เลื่อน (ต่ออายุแต่ละครั้งที่ผู้ใช้เยี่ยมชม) และขึ้นอยู่กับข้อมูลเซิร์ฟเวอร์ / กรอบงานของคุณจะถูกจัดเก็บในกระบวนการ (หมายถึงข้อมูลจะหายไปหากเว็บเซิร์ฟเวอร์ล่มหรือรีสตาร์ท) หรือภายนอก เซิร์ฟเวอร์สถานะหรือฐานข้อมูล สิ่งนี้ยังจำเป็นเมื่อใช้เว็บฟาร์ม (มากกว่าหนึ่งเซิร์ฟเวอร์สำหรับเว็บไซต์ที่กำหนด)

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

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

เฟรมเวิร์ก / นักพัฒนาเว็บบางแห่งใช้อินพุต HTML ที่ซ่อนอยู่เพื่อคงอยู่ข้อมูลจากหน้าหนึ่งของฟอร์มไปยังอีกหน้าหนึ่งเพื่อหลีกเลี่ยงการหมดอายุเซสชัน

localStorage, sessionStorage และคุกกี้ทั้งหมดอยู่ภายใต้กฎ "แหล่งกำเนิดเดียวกัน" ซึ่งหมายความว่าเบราว์เซอร์ควรป้องกันการเข้าถึงข้อมูลยกเว้นโดเมนที่ตั้งค่าข้อมูลเริ่มต้นด้วย

สำหรับการอ่านเพิ่มเติมเกี่ยวกับเทคโนโลยีการจัดเก็บลูกค้าดูดำน้ำใน HTML 5

1. LocalStorage

   ข้อดี :

   1. ที่จัดเก็บข้อมูลบนเว็บสามารถดูได้ง่ายว่าเป็นการปรับปรุงคุกกี้ซึ่งให้ความจุที่มากกว่า หากคุณดูซอร์สโค้ด Mozilla เราจะเห็นว่า5120KB ( 5MBซึ่งเท่ากับ2.5 ล้านตัวอักษรบน Chrome) เป็นขนาดพื้นที่เก็บข้อมูลเริ่มต้นสำหรับทั้งโดเมน สิ่งนี้ทำให้คุณมีพื้นที่ในการทำงานมากกว่าคุกกี้ 4KB ทั่วไป
   2. ข้อมูลจะไม่ถูกส่งกลับไปยังเซิร์ฟเวอร์สำหรับทุกคำขอ HTTP (HTML, รูปภาพ, JavaScript, CSS, ฯลฯ ) - ลดปริมาณการรับส่งข้อมูลระหว่างไคลเอ็นต์และเซิร์ฟเวอร์
   3. ข้อมูลที่เก็บไว้ใน localStorage ยังคงมีอยู่จนกว่าจะถูกลบอย่างชัดเจน การเปลี่ยนแปลงที่ทำจะถูกบันทึกและพร้อมใช้งานสำหรับการเข้าชมเว็บไซต์ในปัจจุบันและอนาคตทั้งหมด

   ข้อเสีย :

   1. มันทำงานบนนโยบายที่มาเดียวกัน ดังนั้นข้อมูลที่จัดเก็บจะมีอยู่ในแหล่งกำเนิดเดียวกันเท่านั้น

2. คุ้กกี้

   ข้อดี:

   1. เมื่อเปรียบเทียบกับคนอื่นแล้วไม่มีอะไร AFAIK

   จุดด้อย:

   1. ขีด จำกัด 4K ใช้สำหรับคุกกี้ทั้งหมดรวมถึงชื่อค่าวันหมดอายุ ฯลฯ เพื่อรองรับเบราว์เซอร์ส่วนใหญ่ให้เก็บชื่อไว้ต่ำกว่า 4,000 ไบต์และขนาดคุกกี้โดยรวมต่ำกว่า 4093 ไบต์

   2. ข้อมูลจะถูกส่งกลับไปยังเซิร์ฟเวอร์สำหรับทุกคำขอ HTTP (HTML, รูปภาพ, JavaScript, CSS, ฯลฯ ) - เพิ่มปริมาณการรับส่งข้อมูลระหว่างไคลเอ็นต์และเซิร์ฟเวอร์

      โดยทั่วไปแล้วสิ่งต่อไปนี้จะได้รับอนุญาต:

      • ทั้งหมด 300คุกกี้
      • 4096 ไบต์ต่อคุกกี้
      • 20 คุกกี้ต่อโดเมน
      • 81920 ไบต์ต่อโดเมน (รับ 20 คุกกี้ขนาดสูงสุด 4096 = 81920 ไบต์)

3. sessionStorage

   ข้อดี:

   1. localStorageมันคล้ายกับ
   2. ข้อมูลไม่คงที่เช่นข้อมูลจะมีให้เฉพาะต่อหน้าต่าง (หรือแท็บในเบราว์เซอร์เช่น Chrome และ Firefox) ข้อมูลจะใช้ได้เฉพาะในช่วงหน้าเว็บ การเปลี่ยนแปลงที่ทำจะถูกบันทึกและพร้อมใช้งานสำหรับหน้าปัจจุบันรวมถึงการเยี่ยมชมเว็บไซต์ในอนาคตบนหน้าต่างเดียวกัน เมื่อปิดหน้าต่างการจัดเก็บข้อมูลจะถูกลบ

   จุดด้อย:

   1. ข้อมูลมีอยู่ในหน้าต่าง / แท็บที่ตั้งค่าไว้เท่านั้น
   2. ชอบlocalStorageมันทำงานบนนโยบายที่มาเดียวกัน ดังนั้นข้อมูลที่จัดเก็บจะมีอยู่ในแหล่งกำเนิดเดียวกันเท่านั้น

ชำระเงินข้ามแท็บ - วิธีอำนวยความสะดวกในการสื่อสารที่ง่ายระหว่างแท็บเบราว์เซอร์ข้ามต้นทาง

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

ฉันสร้างรูปภาพด้านล่างเพื่อแสดงความแตกต่างอย่างรวดเร็ว:

เหล่านี้เป็นคุณสมบัติของวัตถุ 'หน้าต่าง' ใน JavaScript เช่นเดียวกับเอกสารเป็นหนึ่งในคุณสมบัติของวัตถุหน้าต่างที่ถือวัตถุ DOM

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

Local Storage ทำสิ่งเดียวกัน แต่ยังคงอยู่แม้จะปิดและเปิดเบราว์เซอร์ใหม่

คุณสามารถตั้งค่าและดึงข้อมูลที่เก็บไว้ได้ดังนี้:

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

ในทำนองเดียวกันสำหรับ localStorage

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

ในการจัดเก็บในท้องถิ่นสามารถเก็บข้อมูลออฟไลน์ 5-10mb

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

การจัดเก็บเซสชัน:มันเหมือนกับวันที่จัดเก็บในท้องถิ่นยกเว้นมันจะลบหน้าต่างทั้งหมดเมื่อผู้ใช้เว็บปิดหน้าต่างเบราว์เซอร์

ในที่จัดเก็บข้อมูลเซสชันสามารถเก็บข้อมูลได้สูงสุด 5 mb

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";

เซสชัน : เซสชันเป็นตัวแปรส่วนกลางที่เก็บไว้บนเซิร์ฟเวอร์ แต่ละเซสชั่นจะได้รับรหัสที่ไม่ซ้ำกันซึ่งใช้ในการดึงค่าที่เก็บไว้

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

Web Storage API มีกลไกที่เบราว์เซอร์สามารถจัดเก็บคู่คีย์ / ค่าอย่างปลอดภัยในแบบที่เป็นธรรมชาติมากกว่าการใช้คุกกี้ เว็บเก็บ APIขยายWindowวัตถุที่มีสองคุณสมบัติใหม่ - และWindow.sessionStorage - การเรียกใช้หนึ่งในสิ่งเหล่านี้จะสร้างอินสแตนซ์ของวัตถุหน่วยเก็บข้อมูลซึ่งสามารถตั้งค่าดึงและดึงรายการข้อมูลได้ วัตถุหน่วยเก็บข้อมูลที่แตกต่างกันจะใช้สำหรับและสำหรับแต่ละจุดเริ่มต้น (โดเมน)Window.localStoragesessionStoragelocalStorage

การเก็บรักษาวัตถุมีความเรียบง่ายค่าคีย์ร้านคล้ายกับวัตถุแต่พวกเขาอยู่เหมือนเดิมผ่านการโหลดหน้าเว็บ

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

คีย์และค่านิยมที่มีสายเสมอ เพื่อเก็บชนิดใดก็ได้convert it to Stringแล้วเก็บไว้ แนะนำให้ใช้Storage interfaceวิธีการเสมอ

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));

กลไกสองอย่างภายใน Web Storage มีดังนี้:

• sessionStorageรักษาพื้นที่เก็บข้อมูลแยกต่างหากสำหรับแต่ละแหล่งกำเนิดที่ให้ไว้^{นโยบายเดียวกันแหล่งกำเนิด}ที่พร้อมใช้งานในช่วงเวลาของเซสชันหน้า (ตราบเท่าที่เปิดเบราว์เซอร์รวมถึงการโหลดหน้าซ้ำและการเรียกคืน)
• localStorageทำสิ่งเดียวกัน แต่ยังคงอยู่แม้เมื่อเบราว์เซอร์ปิดและเปิดใหม่

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

จัดเก็บสูงสุดที่มีอยู่ที่แตกต่างกันต่อเบราว์เซอร์แต่เบราว์เซอร์ส่วนใหญ่จะมีการดำเนินการอย่างน้อย W3C แนะนำการ จำกัด การจัดเก็บสูงสุดของ5MB

+----------------+--------+---------+-----------+--------+
|                | Chrome | Firefox | Safari    |  IE    |
+----------------+--------+---------+-----------+--------+
| LocalStorage   | 10MB   | 10MB    | 5MB       | 10MB   |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB   | 10MB    | Unlimited | 10MB   |
+----------------+--------+---------+-----------+--------+

ตรวจจับความปลอดภัย LocalStorage และโควต้าเกินข้อผิดพลาดเสมอ

• QuotaExceededError : เมื่อขีด จำกัด การจัดเก็บเกินกว่าในฟังก์ชั่นนี้window.sessionStorage.setItem(key, value);มันจะโยนข้อยกเว้น "QuotaExceededError" DOMException ถ้าค่าใหม่ไม่สามารถตั้งค่า (การตั้งค่าอาจล้มเหลวหากเช่นผู้ใช้ปิดการใช้งานที่เก็บข้อมูลสำหรับไซต์หรือหากเกินโควต้าแล้ว)

  DOMException QUOTA_EXCEEDED_ERR 22ตัวอย่างซอ

• SecurityErrorUncaught SecurityError: Access to 'localStorage' is denied for this document :

  CHROME:-Privacy and security « Content settings « Cookies « Block third-party cookies.

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

หมายเหตุ: สำหรับตัวอย่างที่โลกแห่งความจริงดูเว็บการจัดเก็บข้อมูลการสาธิต ^{ตรวจสอบซอร์สโค้ด}

ฟังกิจกรรมการจัดเก็บข้อมูลบน dom / Window เพื่อตรวจจับการเปลี่ยนแปลงในการจัดเก็บ ซอ

คุกกี้ (เว็บคุกกี้คุกกี้ของเบราว์เซอร์) คุกกี้เป็นข้อมูลที่จัดเก็บในไฟล์ข้อความขนาดเล็กเป็นคู่ค่าชื่อบนคอมพิวเตอร์ของคุณ

การเข้าถึง JavaScript โดยใช้Document.cookie

คุกกี้ใหม่สามารถสร้างผ่าน JavaScript โดยใช้คุณสมบัติ Document.cookie และหากไม่ได้ตั้งค่าสถานะ HttpOnly คุกกี้ที่มีอยู่ก็สามารถเข้าถึงได้จาก JavaScript เช่นกัน

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

^{กลไกการจัดการสถานะ HTTP ของ}คุกกี้ที่ปลอดภัยและ HttpOnly

มักใช้คุกกี้ในเว็บแอปพลิเคชันเพื่อระบุผู้ใช้และเซสชันที่มีการรับรองความถูกต้อง

เมื่อได้รับคำขอ HTTP เซิร์ฟเวอร์สามารถส่งส่วนหัวSet-Cookieพร้อมการตอบกลับ เบราว์เซอร์มักจะเก็บคุกกี้ไว้และจากนั้นคุกกี้จะถูกส่งไปพร้อมกับคำขอที่ส่งไปยังเซิร์ฟเวอร์เดียวกันภายในส่วนหัวคุกกี้ HTTP

Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

คุกกี้เซสชันจะถูกลบออกเมื่อลูกค้าปิดตัวลง พวกเขาไม่ได้ระบุคำสั่งหมดอายุหรืออายุสูงสุด

Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

คุกกี้ถาวรจะหมดอายุในวันที่ระบุ (หมดอายุ) หรือหลังจากระยะเวลาที่กำหนด (อายุสูงสุด)

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

ส่วนหัวคำขอคุกกี้ HTTP มีคุกกี้ HTTP ที่เก็บไว้ที่ส่งก่อนหน้านี้โดยเซิร์ฟเวอร์ด้วยส่วนหัวชุดคุกกี้ คุกกี้ HTTP เท่านั้นไม่สามารถเข้าถึงได้ผ่าน JavaScript ผ่านคุณสมบัติ Document.cookie, XMLHttpRequest และ Request APIs เพื่อลดการโจมตีจากการสคริปต์ข้ามไซต์ (XSS)

คุกกี้ส่วนใหญ่จะใช้เพื่อวัตถุประสงค์สามประการ:

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

คุกกี้ถูกคิดค้นเพื่อแก้ปัญหา "วิธีการจำข้อมูลเกี่ยวกับผู้ใช้":

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

ตัวอย่าง GitHubGist

สรุป

• localStorage ยังคงมีอยู่บนแท็บหรือหน้าต่างที่แตกต่างกันและแม้ว่าเราจะปิดเบราว์เซอร์ตามนโยบายความปลอดภัยของโดเมนและตัวเลือกผู้ใช้เกี่ยวกับการ จำกัด โควต้า
• วัตถุ sessionStorage ไม่คงอยู่หากเราปิดแท็บ (บริบทการสืบค้นระดับบนสุด) เนื่องจากไม่มีอยู่หากเราท่องผ่านแท็บหรือหน้าต่างอื่น
• ที่เก็บข้อมูลเว็บ (เซสชันท้องถิ่น) ช่วยให้เราสามารถบันทึกคู่คีย์ / ค่าจำนวนมากและข้อความจำนวนมากสิ่งที่เป็นไปไม่ได้ทำผ่านคุกกี้
• คุกกี้ที่ใช้สำหรับการดำเนินการที่ละเอียดอ่อนควรมีอายุสั้น ๆ เท่านั้น
• คุกกี้ส่วนใหญ่ใช้สำหรับการโฆษณาและการติดตามทั่วทั้งเว็บ ดูตัวอย่างประเภทของคุกกี้ที่ใช้โดย Google
• คุกกี้จะถูกส่งไปพร้อมกับคำขอทุกครั้งเพื่อให้ประสิทธิภาพแย่ลง (โดยเฉพาะสำหรับการเชื่อมต่อข้อมูลมือถือ) API สมัยใหม่สำหรับที่เก็บข้อมูลไคลเอ็นต์คือ API ที่เก็บข้อมูลบนเว็บ (localStorage และ sessionStorage) และ IndexedDB

LocalStorage :

• ที่จัดเก็บข้อมูลบนเว็บสามารถดูได้ง่ายว่าเป็นการปรับปรุงคุกกี้ซึ่งให้ความจุที่มากกว่า ขนาดที่สามารถใช้ได้คือ 5MB ซึ่งมีพื้นที่ให้ทำงานมากกว่าคุกกี้ 4KB ทั่วไปอย่างมาก

• ข้อมูลจะไม่ถูกส่งกลับไปยังเซิร์ฟเวอร์สำหรับทุกคำขอ HTTP (HTML, รูปภาพ, JavaScript, CSS, ฯลฯ ) - ลดปริมาณการรับส่งข้อมูลระหว่างไคลเอ็นต์และเซิร์ฟเวอร์

• ข้อมูลที่เก็บไว้ใน localStorage ยังคงมีอยู่จนกว่าจะถูกลบอย่างชัดเจน การเปลี่ยนแปลงที่ทำจะถูกบันทึกและพร้อมใช้งานสำหรับการเข้าชมเว็บไซต์ในปัจจุบันและอนาคตทั้งหมด

• มันทำงานบนนโยบายที่มาเดียวกัน ดังนั้นข้อมูลที่จัดเก็บจะมีอยู่ในแหล่งกำเนิดเดียวกันเท่านั้น

คุ้กกี้:

• เราสามารถตั้งเวลาหมดอายุสำหรับแต่ละคุกกี้

• ขีด จำกัด 4K ใช้สำหรับคุกกี้ทั้งหมดรวมถึงชื่อค่าวันหมดอายุ ฯลฯ เพื่อรองรับเบราว์เซอร์ส่วนใหญ่ให้เก็บชื่อไว้ต่ำกว่า 4,000 ไบต์และขนาดคุกกี้โดยรวมต่ำกว่า 4093 ไบต์

• ข้อมูลจะถูกส่งกลับไปยังเซิร์ฟเวอร์สำหรับทุกคำขอ HTTP (HTML, รูปภาพ, JavaScript, CSS, ฯลฯ ) - เพิ่มปริมาณการรับส่งข้อมูลระหว่างไคลเอ็นต์และเซิร์ฟเวอร์

sessionStorage:

• มันคล้ายกับ localStorage

• การเปลี่ยนแปลงมีให้เฉพาะต่อหน้าต่าง (หรือแท็บในเบราว์เซอร์เช่น Chrome และ Firefox) การเปลี่ยนแปลงที่ทำจะถูกบันทึกและพร้อมใช้งานสำหรับหน้าปัจจุบันรวมถึงการเยี่ยมชมเว็บไซต์ในอนาคตบนหน้าต่างเดียวกัน เมื่อปิดหน้าต่างการจัดเก็บข้อมูลจะถูกลบข้อมูลจะใช้ได้เฉพาะภายในหน้าต่าง / แท็บที่ตั้งค่าไว้

• ข้อมูลไม่คงที่นั่นคือข้อมูลจะหายไปเมื่อปิดหน้าต่าง / แท็บ เช่นเดียวกับ localStorage มันทำงานในนโยบายที่มาเดียวกัน ดังนั้นข้อมูลที่จัดเก็บจะมีอยู่ในแหล่งกำเนิดเดียวกันเท่านั้น

นี่คือการตรวจสอบอย่างรวดเร็วและด้วยความเข้าใจที่ง่ายและรวดเร็ว

จากอาจารย์Beau Carnesจากfreecodecamp