ใน HTML5 มีการเพิ่มคุณสมบัติ localStorage ใหม่ คุณสมบัตินี้ส่วนใหญ่จะใช้เป็นที่เก็บข้อมูลในเครื่องเพื่อแก้ปัญหาพื้นที่จัดเก็บคุกกี้ไม่เพียงพอ (พื้นที่เก็บข้อมูลของคุกกี้แต่ละตัวในคุกกี้คือ 4k) เบราว์เซอร์ทั่วไปใน localStorage ขนาดที่รองรับคือ 5M localStorage นี้จะแตกต่างออกไปในเบราว์เซอร์ที่ต่างกัน
2. ข้อดีและข้อจำกัดของ localStorage ข้อดีของ localStorage1. localStorage ขยายขีดจำกัด 4K ของคุกกี้
2. LocalStorage สามารถจัดเก็บข้อมูลที่ร้องขอครั้งแรกในเครื่องได้โดยตรง ซึ่งเทียบเท่ากับฐานข้อมูล 5M สำหรับส่วนหน้า เมื่อเปรียบเทียบกับคุกกี้ จะสามารถประหยัดแบนด์วิดท์ได้ แต่จะมีเฉพาะในเบราว์เซอร์ระดับไฮเอนด์เท่านั้น
ข้อจำกัดของ localStorage1. เบราว์เซอร์มีขนาดไม่เท่ากัน และแอตทริบิวต์ localStorage รองรับเฉพาะใน IE เวอร์ชันที่สูงกว่า IE8 เท่านั้น
2. ปัจจุบัน เบราว์เซอร์ทั้งหมดจำกัดประเภทค่าของ localStorage ไว้ที่ประเภทสตริง ซึ่งต้องมีการแปลงบางส่วนสำหรับประเภทออบเจ็กต์ JSON ทั่วไปของเราในแต่ละวัน
3. localStorage ไม่สามารถอ่านได้ในโหมดความเป็นส่วนตัวของเบราว์เซอร์
4. LocalStorage จะอ่านสตริงเป็นหลัก หากคุณจัดเก็บเนื้อหาจำนวนมาก มันจะใช้พื้นที่หน่วยความจำและทำให้เพจค้าง
5. โปรแกรมรวบรวมข้อมูลไม่สามารถรวบรวมข้อมูล localStorage ได้
ข้อแตกต่างระหว่าง localStorage และ sessionStorage ก็คือ localStorage เป็นของที่เก็บข้อมูลถาวร ในขณะที่ sessionStorage เป็นของ sessionStorage เมื่อเซสชันสิ้นสุดลง คู่คีย์-ค่าใน sessionStorage จะถูกล้าง
ที่นี่เราใช้ localStorage เพื่อวิเคราะห์
3. การใช้ 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);พิมพ์ออกมาเป็นวัตถุวัตถุ
สิ่งที่ควรทราบอีกประการหนึ่งคือต้องแปลงประเภทอื่นเมื่ออ่าน