สรุปการใช้ localStorage และ sessionStorage

ใน HTML5 มีการเพิ่มคุณสมบัติ localStorage ใหม่ คุณสมบัตินี้ส่วนใหญ่จะใช้เป็นที่เก็บข้อมูลในเครื่องเพื่อแก้ปัญหาพื้นที่จัดเก็บคุกกี้ไม่เพียงพอ (พื้นที่เก็บข้อมูลของคุกกี้แต่ละตัวในคุกกี้คือ 4k) เบราว์เซอร์ทั่วไปใน localStorage ขนาดที่รองรับคือ 5M localStorage นี้จะแตกต่างออกไปในเบราว์เซอร์ที่ต่างกัน

1. localStorage ขยายขีดจำกัด 4K ของคุกกี้

2. LocalStorage สามารถจัดเก็บข้อมูลที่ร้องขอครั้งแรกในเครื่องได้โดยตรง ซึ่งเทียบเท่ากับฐานข้อมูล 5M สำหรับส่วนหน้า เมื่อเปรียบเทียบกับคุกกี้ จะสามารถประหยัดแบนด์วิดท์ได้ แต่จะมีเฉพาะในเบราว์เซอร์ระดับไฮเอนด์เท่านั้น

1. เบราว์เซอร์มีขนาดไม่เท่ากัน และแอตทริบิวต์ localStorage รองรับเฉพาะใน IE เวอร์ชันที่สูงกว่า IE8 เท่านั้น

2. ปัจจุบัน เบราว์เซอร์ทั้งหมดจำกัดประเภทค่าของ localStorage ไว้ที่ประเภทสตริง ซึ่งต้องมีการแปลงบางส่วนสำหรับประเภทออบเจ็กต์ JSON ทั่วไปของเราในแต่ละวัน

3. localStorage ไม่สามารถอ่านได้ในโหมดความเป็นส่วนตัวของเบราว์เซอร์

4. LocalStorage จะอ่านสตริงเป็นหลัก หากคุณจัดเก็บเนื้อหาจำนวนมาก มันจะใช้พื้นที่หน่วยความจำและทำให้เพจค้าง

5. โปรแกรมรวบรวมข้อมูลไม่สามารถรวบรวมข้อมูล localStorage ได้

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

ที่นี่เราใช้ localStorage เพื่อวิเคราะห์

การสนับสนุนเบราว์เซอร์สำหรับ localStorage:

ข้อความพิเศษที่นี่คือหากคุณใช้เบราว์เซอร์ IE UserData จะถูกนำมาใช้เป็นที่เก็บข้อมูล คำอธิบายหลักที่นี่คือเนื้อหาของ localStorage ดังนั้น userData จะไม่อธิบายมากเกินไป และในความเห็นส่วนตัวของบล็อกเกอร์ไม่มี จำเป็นต้องเรียนรู้การใช้ UserData เนื่องจาก IE6/IE7 ในปัจจุบันอยู่ในขั้นตอนของการกำจัด และการพัฒนาเพจจำนวนมากในปัจจุบันเกี่ยวข้องกับเทคโนโลยีเกิดใหม่ เช่น HTML5/CSS3 ดังนั้น โดยทั่วไปแล้วเราจะไม่ใช้เพื่อความเข้ากันได้

ขั้นแรก เมื่อใช้ localStorage เราต้องตรวจสอบว่าเบราว์เซอร์รองรับแอตทริบิวต์ localStorage หรือไม่

 if(!window.localStorage){ alert(browser support localstorage); return false; }else{ //ธุรกิจตรรกะหลัก}

มีสามวิธีในการเขียนไปยัง localStorage ที่นี่เราจะแนะนำพวกเขาทีละคน

 if(!window.localStorage){ alert(browser support localstorage); }else{ var storage=window.localStorage; //เขียนที่เก็บข้อมูลฟิลด์[a]=1; //เขียนที่เก็บข้อมูล b ; // เขียนฟิลด์ c storage.setItem(c,3); console.log(typeof storage[a]); console.log(typeof storage[b]); console.log(typeof ที่เก็บข้อมูล[ค]);

ผลลัพธ์หลังจากการรันจะเป็นดังนี้:

ควรสังเกตว่าการใช้ localStorage ยังเป็นไปตามนโยบายที่มีต้นกำเนิดเดียวกัน ดังนั้นเว็บไซต์ที่ต่างกันจึงไม่สามารถแชร์ localStorage เดียวกันได้โดยตรง

ผลลัพธ์สุดท้ายที่พิมพ์บนคอนโซลคือ:

ฉันไม่รู้ว่าผู้อ่านคนไหนสังเกตเห็นว่าสิ่งที่เพิ่งเก็บไว้เป็นประเภท int แต่มันถูกพิมพ์เป็นประเภทของสตริง สิ่งนี้เกี่ยวข้องกับลักษณะของ localStorage เอง รองรับเฉพาะการจัดเก็บประเภทสตริงเท่านั้น

การอ่าน localStorage

 if(!window.localStorage){ alert(browser support localstorage); }else{ var storage=window.localStorage; //เขียนที่เก็บข้อมูลฟิลด์[a]=1; //เขียน b ฟิลด์ที่เก็บข้อมูล.a=1 ; เขียนฟิลด์ c storage.setItem(c,3); console.log(typeof storage[a]); console.log(typeof storage[b]); console.log(typeof storage[c]); // วิธีแรกอ่าน var a=storage.a; console.log(a); // วิธีที่สองอ่าน var b=storage[b]; วิธีที่สามอ่าน var c=storage.getItem(c); console.log(c);

มีสามวิธีในการอ่าน localStorage วิธีการที่แนะนำอย่างเป็นทางการคือ getItem/setItem เพื่อเข้าถึงมัน อย่าถามฉันว่าทำไมเพราะฉันไม่รู้

ฉันได้กล่าวไปแล้วว่า localStorage นั้นเทียบเท่ากับฐานข้อมูลส่วนหน้า ฐานข้อมูลส่วนใหญ่ประกอบด้วยสี่ขั้นตอน: การเพิ่ม การลบ และการสืบค้น การอ่านและการเขียนที่นี่เทียบเท่ากับการบวกและการสืบค้นสองขั้นตอน

ตอนนี้เรามาพูดถึงสองขั้นตอนในการลบและแก้ไข localStorage

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

 if(!window.localStorage){ alert(browser support localstorage); }else{ var storage=window.localStorage; //เขียนที่เก็บข้อมูลฟิลด์[a]=1; //เขียน b ฟิลด์ที่เก็บข้อมูล.b=1 ; เขียนฟิลด์ c storage.setItem(c,3); console.log(storage.a); // console.log(typeof storage[a]); // console.log(typeof ที่เก็บข้อมูล [b]); // console.log (ประเภทของที่เก็บข้อมูล [c]); /* เส้นแยก */ storage.a=4; console.log (storage.a);

บนคอนโซลเราจะเห็นว่าคีย์ถูกเปลี่ยนเป็น 4

การลบ localStorage

1. ล้างเนื้อหาทั้งหมดของ localStorage

 var storage=window.localStorage; storage.a=1; storage.setItem(c,3); console.log(ที่เก็บข้อมูล);

2. ลบคู่คีย์-ค่าใน localStorage

 var storage=window.localStorage; storage.a=1; storage.setItem(c,3); console.log(ที่เก็บข้อมูล);

ดูผลลัพธ์บนคอนโซล

การได้มาซึ่งคีย์ localStorage

 var storage=window.localStorage; storage.a=1; storage.setItem(c,3); for(var i=0;i<storage.length;i++){ var key=storage.key(i); เข้าสู่ระบบ (คีย์); }

ใช้เมธอด key() เพื่อรับคีย์ที่เกี่ยวข้องโดยการเข้าและออกจากดัชนี

4. ข้อควรพิจารณาอื่นๆ สำหรับ localStorage

โดยทั่วไปเราจะจัดเก็บ JSON ไว้ใน localStorage แต่ localStorage จะแปลง localStorage เป็นรูปแบบสตริงโดยอัตโนมัติ

ในขณะนี้เราสามารถใช้เมธอด JSON.stringify() เพื่อแปลง JSON ให้เป็นสตริง JSON

ตัวอย่าง:

 if(!window.localStorage){ alert(browser support localstorage); }else{ var storage=window.localStorage; var data={ ชื่อ:'xiecanyong', เพศ:'ผู้ชาย', งานอดิเรก:'program' }; =JSON.stringify(ข้อมูล); storage.setItem(ข้อมูล,d); console.log(storage.data);

หลังจากอ่านแล้ว หากต้องการแปลงสตริง JSON เป็นออบเจ็กต์ JSON ให้ใช้เมธอด JSON.parse()

 var storage=window.localStorage; var data={ ชื่อ: 'xiecanyong', เพศ: 'man', งานอดิเรก: 'program' }; var d=JSON.stringify(data); /แปลงสตริง JSON เป็นเอาต์พุตอ็อบเจ็กต์ JSON var json=storage.getItem(data); var jsonObj=JSON.parse(json); console.log(typeof jsonObj);

พิมพ์ออกมาเป็นวัตถุวัตถุ

สิ่งที่ควรทราบอีกประการหนึ่งคือต้องแปลงประเภทอื่นเมื่ออ่าน