home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

โหลดหน้าเว็บใหม่โดยไม่สูญเสียข้อมูลฟอร์มด้วย HTML5 Web Storage

ใช้ localStorage หรือ sessionStorage

บันทึกข้อมูลก่อน unload แล้วคืนค่าเมื่อ load ใหม่

ก่อน Reload/Unload

window.onbeforeunload = function() {
    localStorage.setItem('name', $('#inputName').val());
    localStorage.setItem('phone', $('#inputPhone').val());
    localStorage.setItem('address', $('#inputAddress').val());
};

เมื่อโหลดหน้าใหม่

window.onload = function() {
    var name = localStorage.getItem('name');
    var phone = localStorage.getItem('phone');
    if (name !== null) $('#inputName').val(name);
    if (phone !== null) $('#inputPhone').val(phone);
    // ...
};

localStorage คงอยู่ถาวร | sessionStorage หายเมื่อปิดแท็บ/เบราว์เซอร์