Locale Storage กับ sessionStorage

•  Locale Storage กับ sessionStorage เป็น Object ที่เป็น property ของ Object Window
• ค่าของ property ของ Locale Storage กับ sessionStorage จะเป็น String เท่านั้น

อายุการเก็บค่ากับ Scope

	Lifetime	Scope
localStorage	ตลอดไปจนกว่าจะถูกลบ	document origin (protocol+hostname+port)
sessionStorage	หายไปเมื่อปิดหน้าต่าง (Browser อาจจะเอาค่ากลับคืนหากมีการใช้ restore tab )	document origin + window Script ที่รันคนละหน้าต่างหรืแท็บจะมี sessionStorage แยกกัน

การใช้งาน

ใช้แบบ object ปกติ

let name = localStorage.username;         // Query a stored value.
if (!name) {
    name = prompt("What is your name?");  // Ask the user a question.
    localStorage.username = name;         // Store the user's response.
}

delete localStorage.username //Use delete operator

สามารถใช้ for/in หรือ Object.key() ได้

ใช้ผ่าน methods

• clear()
• getItem(keyName)
• setItem(keyName, keyValue)
• removeItem(keyName)
• key(intIndex)

ถ้าต้องการเก็บค่าที่ไม่ใช่ String จะต้อง encode/decode เอง

// If you store a number, it is automatically converted to a string.
// Don't forget to parse it when retrieving it from storage.
localStorage.x = 10;
let x = parseInt(localStorage.x);
// Convert a Date to a string when setting, and parse it when getting
localStorage.lastRead = (new Date()).toUTCString();
let lastRead = new Date(Date.parse(localStorage.lastRead));
// JSON makes a convenient encoding for any primitive or data structure
localStorage.data = JSON.stringify(data);  // Encode and store
let data = JSON.parse(localStorage.data);  // Retrieve and decode.

Storage Event

เมื่อ Storage มีการเปลี่ยนแปลงจะเกิด Storage Event ขึ้นกับ window object ที่มองเห็น Storage แต่ window ที่เปลี่ยนค่าจะไม่ได้รับ event นี้ ดังนั้นเราจึงสามารถใช่ Storage เพื่อทำการ boardcast การเปลี่ยนแปลงได้

Window.addEventListener("storage", (event) => {});
Window.onstorage = (event) => {};