ที่เก็บข้อมูล HTML5 โลคัลกับที่เก็บข้อมูลเซสชัน


561

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


15
@robert - ฉันเชื่อว่าคุณไม่ถูกต้อง จากw3.org/TR/webstorage sessionStorage จะถูก จำกัด ขอบเขตไว้ที่ "บริบทการสืบค้นระดับสูง" ซึ่งหมายความว่าเป็นเอกลักษณ์ของแต่ละแท็บ / หน้าต่างของเบราว์เซอร์ localStorage ถูกกำหนดขอบเขตไปที่จุดเริ่มต้นอย่างไรก็ตามหมายถึงมันถูกแชร์ในทุกหน้าในจุดเริ่มต้นเดียวกัน
broofa

5
Re: ประสิทธิภาพjsperf.com/localstorage-vs-sessionstorage
colllin

4
สำเนาที่เป็น
SW4

คำตอบ:


812

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

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

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


17
มีการอภิปรายที่กว้างขึ้นซึ่งคุณอาจพบว่ามีประโยชน์ได้ที่นี่: stackoverflow.com/questions/19867599/…
Ed Sykes

13
หากคุณบันทึกข้อมูลบางส่วนในที่เก็บข้อมูลภายใต้ http คุณจะไม่สามารถเรียกดูได้ที่ https
Mark Thien

ฉันทดสอบสิ่งนี้บน Chrome v41.x และดูเหมือนว่าข้อความข้างต้นเกี่ยวกับ https ไม่เป็นความจริง: localStorage จะเก็บข้อมูลที่เก็บไว้
CCC

36
SessionStorage รอดชีวิตจากการโหลดซ้ำและเรียกคืนหน้าเว็บ แต่การเปิดแท็บ / หน้าต่างใหม่จะเริ่มต้นเซสชันใหม่
แพทริค

160

ความแตกต่างเพียงอย่างเดียวคือ localStorage มีเวลาหมดอายุที่แตกต่างกันsessionStorageจะสามารถเข้าถึงได้ในขณะที่และโดยหน้าต่างที่สร้างขึ้นเท่านั้นจะเปิดขึ้น
localStorageคงอยู่จนกว่าคุณจะลบมันหรือผู้ใช้ลบมัน
ช่วยบอกว่าคุณต้องการที่จะบันทึกชื่อผู้ใช้เข้าสู่ระบบและรหัสผ่านที่คุณต้องการใช้sessionStorageมากกว่าlocalStorageเหตุผลด้านความปลอดภัย (เช่น. บุคคลอื่นเข้าถึงบัญชีของพวกเขาในเวลาต่อมา) แต่ถ้าคุณต้องการที่จะบันทึกการตั้งค่าของผู้ใช้ในเครื่องของพวกเขาที่คุณอาจจะต้องการ
localStorageทั้งหมด:

localStorage- ใช้สำหรับการใช้งานในระยะยาว
sessionStorage- ใช้เมื่อคุณต้องการเก็บสิ่งที่เปลี่ยนแปลงหรือสิ่งชั่วคราว


103

มีประเด็นอื่น ๆ อีกเล็กน้อยที่อาจเป็นประโยชน์ในการเข้าใจความแตกต่างระหว่างที่จัดเก็บในตัวเครื่องและเซสชัน

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

    https://mydomain.com/
    http://mydomain.com/
    https://mydomain.com:8080/

    URL ข้างต้นทั้งหมดจะไม่ใช้พื้นที่เก็บข้อมูลร่วมกัน (เส้นทางการแจ้งให้ทราบของหน้าเว็บไม่ส่งผลกระทบต่อการจัดเก็บเว็บ)

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

  3. ทั้งในระดับท้องถิ่นและการเก็บรักษาเซสชั่นนอกจากนี้ยังมีขอบเขตโดยผู้ขายเบราว์เซอร์ Chrome หรือ FF ไม่สามารถอ่านข้อมูลหน่วยเก็บที่บันทึกโดย IE ได้

หวังว่านี่จะช่วยได้


3
ไม่เซสชันเดียวกันเก็บข้อมูลร่วมกันระหว่าง http และ https แต่ localStorage ไม่ใช่
Shahdat

5
หากคุณตั้งค่า sessionStorage ใน https ต้นทางก่อนจะมีอยู่ใน http แต่ถ้าคุณสร้าง sessionStore ใน http จากนั้นจะไม่สามารถใช้ได้ใน http
Shahdat

4
@Shahdat คุณหมายถึง "ถ้าอย่างนั้นจะไม่สามารถใช้งานได้ใน https" (สังเกตเห็น)
Daniel Werner

3
@DanielWerner ใช่ถ้าคุณสร้าง sessionStore ใน http แล้วจะไม่สามารถใช้ได้ใน https
Shahdat

28

ความแตกต่างที่สำคัญระหว่างlocalStorageและsessionStorageคือที่sessionStorageไม่ซ้ำกันสำหรับแต่ละแท็บ หากคุณปิดแท็บการsessionStorageลบlocalStorageจะไม่ทำเช่นนั้น นอกจากนี้คุณไม่สามารถสื่อสารระหว่างแท็บ :)

ความแตกต่างที่ลึกซึ้งอีกประการหนึ่งคือตัวอย่างเช่นบน Safari (8.0.3) localStorageมีขีด จำกัด อักขระ 2551 k แต่sessionStorageมีที่เก็บข้อมูลไม่ จำกัด

บน Chrome (v43) ทั้งคู่localStorageและsessionStorageจำกัด ไว้ที่ 5101 k ตัวอักษร (ไม่ต่างจากโหมดปกติ / ไม่ระบุตัวตน)

บน Firefox ทั้งสองlocalStorageและsessionStorageถูก จำกัด ที่ 5,2020 k ตัวอักษร (ไม่แตกต่างกันระหว่างโหมดปกติ / ส่วนตัว)

ไม่ต่างกับความเร็วเลย :)

นอกจากนี้ยังมีปัญหากับ Mobile Safari และ Mobile Chrome, Private Mode Safari & Chrome มีพื้นที่สูงสุด 0KB


1
จำกัด อยู่ที่ 5101 k ตัวอักษร? ดังนั้น .. 5.101 ล้านตัวอักษร?
Zze

@Zze ใช่ 1 ตัวอักษรมักจะเป็น 1 ไบต์ดังนั้น 5 ล้านตัวอักษรเป็น 5Mb มูลค่าการเก็บข้อมูล
Basim Khajwal

@BasimKhajwal นั่นคือ 5MB ไบต์ไม่ใช่บิต
Yeti

คุณช่วยเพิ่มแหล่งที่มาให้กับสิ่งที่คุณพูดถึงได้ไหม
Mukus

@Mukus ไม่มีแหล่งที่มาฉันวิ่งทดสอบตัวเองและมีปัญหากับ Private Mode Safari ที่มี localStorage แต่ไม่มีที่ว่างและ polyfill ของฉันจะไม่ทำงานเนื่องจาก localStorage มีอยู่ แต่สคริปต์ล้มเหลวเนื่องจากไม่สามารถจัดเก็บได้ อะไรที่นั่น คุณสามารถทดสอบได้เช่นกันโดยใช้เครื่องมือนี้ - dev-test.nemikor.com/web-storage/support-test
Eek

17

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


10

ประสิทธิภาพการทำงานที่ชาญฉลาดการวัด (หยาบ) ของฉันไม่พบความแตกต่างในการเขียนและอ่าน 1,000 ครั้ง

การรักษาความปลอดภัยอย่างชาญฉลาดดูเหมือนว่า localStore อาจถูกปิดตัวลงก่อนที่เซสชันจะเก็บ แต่ไม่มีหลักฐานที่เป็นรูปธรรม - อาจมีคนอื่นทำ?

ฟังก์ชั่นที่ชาญฉลาดเห็นด้วยกับ digitalFresh ด้านบน


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

6

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


5

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


2

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

//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

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

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

อ่านเพิ่มเติมคลิก


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

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

ฉันใช้สิ่งนี้จากhttps://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.