คำอธิบายโดยละเอียดเกี่ยวกับวิธีการจัดเก็บ HTML5 SessionStorage และ LocalStorage

ความคิดเห็น: การจัดเก็บเว็บใน HTML5 มีวิธีการจัดเก็บสองวิธี: SessionStorage และ LocalStorage SessionStorage ใช้เพื่อจัดเก็บข้อมูลในเซสชันในพื้นที่ซึ่งสามารถเข้าถึงได้ในหน้าเว็บในเซสชันเดียวกันและข้อมูลจะถูกทำลายหลังจากเซสชันสิ้นสุดลง

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 หน้าเรียกว่าวิธีการที่เรียกการเปลี่ยนแปลงนี้