ความคิดเห็น: การจัดเก็บเว็บใน HTML5 มีวิธีการจัดเก็บสองวิธี: SessionStorage และ LocalStorage SessionStorage ใช้เพื่อจัดเก็บข้อมูลในเซสชันในพื้นที่ซึ่งสามารถเข้าถึงได้ในหน้าเว็บในเซสชันเดียวกันและข้อมูลจะถูกทำลายหลังจากเซสชันสิ้นสุดลง
ดังนั้น SessionStorage จึงไม่ได้เป็นที่เก็บข้อมูลในพื้นที่ถาวร แต่มีเพียงการจัดเก็บระดับเซสชัน LocalStorage ใช้สำหรับการจัดเก็บในท้องถิ่นถาวร ข้อมูลจะไม่หมดอายุเว้นแต่จะถูกลบอย่างแข็งขัน1. ความแตกต่างระหว่างการจัดเก็บเว็บและคุกกี้
แนวคิดของการจัดเก็บเว็บนั้นคล้ายกับคุกกี้ความแตกต่างคือมันถูกออกแบบมาสำหรับการจัดเก็บความจุที่ใหญ่ขึ้น ขนาดของคุกกี้มี จำกัด และทุกครั้งที่คุณขอหน้าใหม่คุกกี้จะถูกส่งไปซึ่งจะสูญเสียแบนด์วิดธ์ นอกจากนี้คุกกี้จะต้องมีขอบเขตที่ระบุและไม่สามารถเรียกได้ข้ามโดเมน
นอกจากนี้ Web Storage มี setitem, getItem, removeItem, Clear และวิธีอื่น ๆ ซึ่งแตกต่างจากคุกกี้นักพัฒนาส่วนหน้าจำเป็นต้องห่อหุ้ม setcookies และ getcookies เอง
แต่คุกกี้ก็ขาดไม่ได้เช่นกันฟังก์ชั่นของคุกกี้คือการโต้ตอบกับเซิร์ฟเวอร์และมีอยู่เป็นส่วนหนึ่งของข้อกำหนด HTTP ในขณะที่การจัดเก็บเว็บถูกสร้างขึ้นเพื่อจัดเก็บข้อมูลในเครื่องเท่านั้น (แก้ไขจาก @otakustay)
2. สถานะการสนับสนุนเบราว์เซอร์ของ HTML5 Web Storage
ยกเว้น IE7 และต่ำกว่าเบราว์เซอร์มาตรฐานอื่น ๆ รองรับได้อย่างสมบูรณ์ (เช่นและ FF จำเป็นต้องทำงานบนเว็บเซิร์ฟเวอร์) เป็นเรื่องที่ควรค่าแก่การกล่าวถึงว่า IE ทำสิ่งที่ดีเสมอ ตัวอย่างเช่น UserData ใน IE7 และ IE6 เป็นวิธีแก้ปัญหาสำหรับการจัดเก็บข้อมูลในท้องถิ่นของ JavaScript ผ่านการห่อหุ้มรหัสอย่างง่ายสามารถรวมเป็นหนึ่งเดียวกับเบราว์เซอร์ทั้งหมดที่รองรับการจัดเก็บเว็บ
ในการตรวจสอบว่าเบราว์เซอร์รองรับ LocalStorage คุณสามารถใช้รหัสต่อไปนี้:
การแจ้งเตือน ("เรียกดู LocalStorage"))
-
อื่น
-
การแจ้งเตือน ("การท่องเว็บไม่สนับสนุน LocalStorage")
-
// หรือถ้า (typeof window.localstorage == 'undefined') {alert ("การท่องเว็บไม่สนับสนุน localstorage")}
3. การดำเนินงาน LocalStorage และ SessionStorage
LocalStorage และ SessionStorage ทั้งคู่มีวิธีการทำงานเดียวกันเช่น setItem, getItem และ removeItem ฯลฯ
วิธีการของ LocalStorage และ SessionStorage:
ค่าการจัดเก็บ setitem
วัตถุประสงค์: จัดเก็บมูลค่าในฟิลด์คีย์
การใช้งาน: .SetItem (คีย์, ค่า)
ตัวอย่างรหัส:
localstorage.setItem ("ไซต์", "js8.in");
getItem ได้รับค่า
วัตถุประสงค์: รับค่าที่เก็บไว้ในเครื่องในคีย์ที่ระบุ
การใช้งาน: .getItem (กุญแจ)
ตัวอย่างรหัส:
var site = localstorage.getItem ("ไซต์");
removeItem delete key
วัตถุประสงค์: ลบค่าที่เก็บไว้ในเครื่องในคีย์ที่ระบุ
การใช้งาน: .RemoveItem (กุญแจ)
ตัวอย่างรหัส:
localstorage.removeitem ("เว็บไซต์");
ล้างคีย์/ค่าทั้งหมด
วัตถุประสงค์: ล้างคีย์/ค่าทั้งหมด
การใช้งาน: .Clear ()
ตัวอย่างรหัส:
localstorage.clear ();
4. วิธีการทำงานอื่น ๆ : การทำงานของจุดและ []
การจัดเก็บเว็บไม่เพียงสามารถใช้ setitem, getItem ฯลฯ เพื่ออำนวยความสะดวกในการเข้าถึง แต่ยังใช้ตัวดำเนินการ DOT (.) และ [] วิธีการจัดเก็บข้อมูลเช่นวัตถุธรรมดาเช่นรหัสต่อไปนี้:
var storage = window.localstorage; Storage.key1 = "Hello";
Storage ["Key2"] = "World";
console.log (Storage.key1);
console.log (ที่เก็บข้อมูล ["key2"]);
5. คุณสมบัติหลักและความยาวของ LocalStorage และ SessionStorage ถูกนำไปใช้เพื่อ Traverse
key () และความยาวที่จัดทำโดย SessionStorage และ LocalStorage สามารถใช้การสำรวจข้อมูลที่เก็บไว้ได้อย่างง่ายดายเช่นรหัสต่อไปนี้:
var storage = window.localstorage;
สำหรับ (var i = 0, len = storage.length; i <len; i ++)
-
var key = storage.key (i);
var value = storage.getItem (คีย์);
console.log (คีย์ + "=" + ค่า);
-
6. กิจกรรมการจัดเก็บ
ที่เก็บยังมีกิจกรรมการจัดเก็บ เมื่อค่าคีย์เปลี่ยนแปลงหรือชัดเจนเหตุการณ์การจัดเก็บสามารถเรียกใช้ ตัวอย่างเช่นรหัสต่อไปนี้จะเพิ่มการเปลี่ยนแปลงเหตุการณ์การจัดเก็บข้อมูล:
window.addeventListener ("Storage", handle_storage, false);
-
อื่นถ้า (window.attachevent)
-
window.attachevent ("onstorage", handle_storage);
-
ฟังก์ชั่น handle_storage (e) {
if (! e) {e = window.event;}
-
คุณสมบัติเฉพาะของวัตถุเหตุการณ์การจัดเก็บมีดังนี้:
PropertyTypedescription
Keystringthe ชื่อคีย์ที่เพิ่มลบออกหรือแก้ไข
oldvalueanythe ค่าก่อนหน้า (ตอนนี้เขียนทับ) หรือเป็นโมฆะหากมีการเพิ่มรายการใหม่
newValueAnyThe ค่าใหม่หรือ null หากมีการเพิ่มรายการ
url/uristringte หน้าเรียกว่าวิธีการที่เรียกการเปลี่ยนแปลงนี้