localStorage vs sessionStorage vs Cookies – การเปรียบเทียบโดยละเอียด

คุกกี้อยู่กับเราเป็นเวลานาน (Internet Explorer v2 ได้รับการสนับสนุนในเดือนตุลาคม 1995) ไม่มีอะไรผิดปกติกับพวกเขา และพวกเขาทำให้เว็บเป็นที่ที่น่าอยู่มากขึ้นอย่างแน่นอน แต่หลังจากเกือบ 25 ปี สิ่งต่างๆ มากมายเปลี่ยนไป

Local Storage (คุณจะพบได้ภายใต้ Web Storage บน W3) เป็นและไม่ได้แทนที่คุกกี้ นั่นคือสิ่งที่สับสนมากที่สุดเกี่ยวกับเรื่องนี้ ในกรณีส่วนใหญ่ คุณสามารถใช้ localStorage แทนคุกกี้ได้อย่างปลอดภัย และได้รับการแสดงผล (ผิด) ว่าเหมือนกันแต่ไม่ใช่ อ่านต่อไปเพื่อดูรายละเอียดเกี่ยวกับวิธีและเวลาที่ควรใช้ localStorage เพื่อแทนที่คุกกี้

การปฏิวัติหรือวิวัฒนาการ?

ที่เก็บข้อมูลในเครื่อง หรือ localStorage หรือที่เก็บข้อมูล DOM หรือที่เก็บข้อมูลเว็บ (ฉันไม่ได้สร้างชื่อเหล่านี้ ทั้งหมดนี้มีการใช้งานอยู่และทั้งหมดอ้างอิงในสิ่งเดียวกัน) ได้รับการยอมรับในโลกแห่งความเป็นจริงในเบราว์เซอร์ยอดนิยมในปี 2012 เป็น “HTML5 คุณสมบัติ". ดูเหมือนว่าจะเป็นการทดแทนคุกกี้จากสวรรค์ การแก้ไขสำหรับคำขอที่มากเกินไปซึ่งมีข้อมูลที่ไม่จำเป็นตลอดเวลาและข้อจำกัดด้านขนาด แม้ว่าจะ "แก้ปัญหา" เหล่านั้นได้ แต่ก็ไม่ใช่การแทนที่คุกกี้ด้วยแอปเปิ้ลสำหรับแอปเปิ้ล

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

WP Reset เป็นปลั๊กอินที่มาพร้อมกับตัวเลือกการรีเซ็ตต่างๆ ที่จะช่วยให้คุณทำสิ่งต่างๆ เช่น ลบข้อมูลที่สะสมและ/หรือส่วนเสริม (ปลั๊กอิน ธีม ผู้ใช้ วิดเจ็ต เนื้อหา ฯลฯ) ออกจากไซต์ของคุณ และ แม้กระทั่งเช็ดไซต์ของคุณให้สะอาดหมดจด น่าทึ่งใช่มั้ย? แต่นั่นไม่ใช่ทั้งหมด ในบรรดาคุณสมบัติอื่น ๆ ปลั๊กอินนี้สามารถสร้างสแน็ปช็อตฐานข้อมูลรวมถึงคอลเลกชั่นปลั๊กอินและธีมที่คุณสามารถติดตั้งได้ด้วยการคลิกหลายครั้งเท่าที่คุณต้องการ เป็นเครื่องมือที่ควรค่าแก่การตรวจสอบอย่างแน่นอน

แต่ตอนนี้ กลับมาพูดถึง localStorage กันดีกว่า

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

คล้ายคลึงกัน

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

เจาะลึกลงไปในที่เก็บข้อมูลเว็บ & คุกกี้

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

เป็นเรื่องปกติที่ผู้ใช้จะ บล็อกบุคคลที่สามหรือคุกกี้ทั้งหมด กฎเดียวกันนี้ใช้กับที่จัดเก็บในเครื่อง ไม่มีการรับประกันใดๆ และแอปของคุณต้องทำงาน (หรืออย่างน้อยต้องไม่พัง) ในสภาพแวดล้อมที่ไม่มีที่เก็บข้อมูลในเครื่อง

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

“คุณหมายถึงอะไรที่ สามารถบันทึกได้เฉพาะสตริงเท่านั้น ? ฉันบันทึกวัตถุตลอดเวลา!” JSON ช่วยให้คุณบันทึกวัตถุและประเภทข้อมูลอื่นๆ ในรูปแบบของสตริงได้ การแปลงเป็นการอ่านและเขียนโดยที่คุณไม่รู้ตัว ด้วยคลังเสียงสำหรับจัดการกับคุกกี้และที่จัดเก็บในตัวเครื่อง คุณจะไม่ต้องคำนึงถึงประเภทข้อมูลอีกต่อไป อย่างไรก็ตาม นั่นไม่ได้เปลี่ยนความจริงที่ว่ารองรับเฉพาะสตริงเท่านั้น

ไม่มี คุณลักษณะฝั่งไคลเอ็นต์เดียวที่เบราว์เซอร์ทั้งหมดสนับสนุน มันเป็นเรื่องที่น่าเศร้า แต่ก็ยังเป็นความจริง คุณสามารถตรวจสอบหมายเลขเฉพาะบน Can I Use ได้ แต่ตราบใดที่คุกกี้และที่จัดเก็บในตัวเครื่องมีให้ ฉันจะเพิกเฉยต่อเบราว์เซอร์ทั้งหมดที่ไม่รองรับ เป็นส่วนน้อยและต่ำกว่า 1%

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

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

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

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

รหัสเล็กน้อยในการเริ่มต้น

บทความนี้ไม่ได้มีวัตถุประสงค์เพื่อเป็นบทช่วยสอนเกี่ยวกับพื้นที่เก็บข้อมูลบนเว็บของ JavaScript แต่เพื่อช่วยคุณแก้ปัญหา นี่คือตัวอย่าง Hello World ที่มีที่จัดเก็บในเครื่อง

// store a value
localStorage.setItem( 'name', 'John' );

// retrieve a value
localStorage.getItem( 'name' );

// remove the value
localStorage.removeItem( 'name' );

// only string values can be stored so for objects, use JSON
var post = {
  title: 'Cookies are old',
  author: 'Gordan'
}
localStorage.setItem( 'post', JSON.stringify( post ) );

// and to retrieve
var post = JSON.parse( localStorage.getItem( 'post' ) );

โค้ดด้านบนใช้งานได้ และง่ายที่สุด อย่างไรก็ตามฉันไม่แนะนำให้ใช้ เช่นเดียวกับคุกกี้ ไม่มีใครใช้ document.cookies เพื่อโต้ตอบกับคุกกี้ มีข้อแตกต่างระหว่างเบราว์เซอร์เล็กน้อยที่ต้องนำมาพิจารณา และเนื่องจากเก็บเฉพาะสตริง คุณจึงต้องทำให้สตริงและแยกวิเคราะห์ด้วย JSON ทุกครั้งที่อ่านและเขียน นั่นเป็นเหตุผลที่เราใช้ไลบรารีขนาดเล็กเพื่อช่วยเราจัดการคุกกี้ เช่น js-cookie กันไปสำหรับการจัดเก็บในเครื่อง การวางเลเยอร์นามธรรมขนาดเล็กระหว่างโค้ดของคุณกับ API จะช่วยได้ในระยะยาว ฉันแนะนำ store.js มีมาระยะหนึ่งแล้ว จัดการกับเรื่องไร้สาระข้ามเบราว์เซอร์และทางเลือกอื่น และยังมีปลั๊กอินที่มีประโยชน์ที่จะขยายคุณสมบัติต่างๆ หากคุณสนใจที่จะฝึกเขียนโค้ด ให้สร้างไลบรารีของคุณเองและแปลงเป็นปลั๊กอิน jQuery

คุกกี้ไม่ดีใช่มั้ย? เราต้องการสิ่งใหม่!

คุกกี้ก็ไม่เลว พวกเขาปฏิบัติตามจุดประสงค์มานานหลายทศวรรษแล้วและจะทำต่อไปเนื่องจากที่เก็บข้อมูลในเครื่องไม่ใช่การแทนที่ "แอปเปิ้ลสำหรับแอปเปิ้ล" อย่างไรก็ตาม คุกกี้มีสัญญาณของความชรา นอกจากนั้น ข้อบกพร่องด้านการออกแบบบางส่วนของพวกเขาจะไม่หายไปในเร็วๆ นี้เช่นกัน กล่าวคือ "ก่อให้เกิดมลพิษ" ทุกคำขอในโดเมนที่มีส่วนของข้อมูลคุกกี้และขนาดน้ำหนักบรรทุกสูงสุดที่เล็กที่สุด

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

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