javascript - วิธีลบรายการ localStorage เมื่อปิดหน้าต่าง/แท็บเบราว์เซอร์?

กรณีของฉัน: localStorage พร้อมคีย์ + ค่าที่ควรถูกลบเมื่อปิดเบราว์เซอร์และไม่ใช่เพียงแท็บเดียว

กรุณาดูโค้ดของฉันว่าถูกต้องหรือไม่และสามารถปรับปรุงส่วนใดได้บ้าง:

//create localStorage key + value if not exist
if (localStorage) {
  localStorage.myPageDataArr = {
    "name" => "Dan",
    "lastname" => "Bonny"
  };
}

//when browser closed - psedocode
$(window).unload(function() {
  localStorage.myPageDataArr = undefined;
});

คำตอบ #1

ควรทำแบบนั้นและไม่ควรใช้โอเปอเรเตอร์ delete:

localStorage.removeItem(key);

คำตอบ #2

คุณควรใช้ sessionStorage แทนถ้าคุณต้องการให้คีย์ถูกลบเมื่อปิดเบราว์เซอร์

คำตอบ #3

ใช้กับคีย์เวิร์ดทั่วโลก window:-

 window.localStorage.removeItem('keyName');

คำตอบ #4

คุณสามารถใช้เหตุการณ์ beforeunload ใน JavaScript ได้

การใช้ JavaScript แบบธรรมดา คุณสามารถทำอะไรบางอย่างได้ดังนี้:

window.onbeforeunload = function() {
  localStorage.removeItem(key);
  return '';
};

นั่นจะลบคีย์ก่อนที่หน้าต่าง/แท็บเบราว์เซอร์จะปิด และจะแจ้งให้คุณยืนยันการปิดหน้าต่าง/แท็บ ฉันหวังว่าสิ่งนั้นจะแก้ปัญหาของคุณได้

หมายเหตุ: วิธี onbeforeunload ควรส่งค่ากลับเป็นสตริง

คำตอบ #5

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

คำตอบ #6

มีกรณีการใช้งานเฉพาะเจาะจงมากที่คำแนะนำใด ๆ ให้ใช้ sessionStorage แทน localStorage จะไม่ช่วยอะไรจริง ๆ กรณีการใช้งานนี้จะง่าย ๆ เช่น การเก็บข้อมูลบางอย่างในขณะที่คุณมีอย่างน้อยหนึ่งแท็บเปิด แต่ยกเลิกการใช้งานข้อมูลนั้นหากคุณปิดแท็บสุดท้าย หากคุณต้องการให้ค่าของคุณถูกบันทึกข้ามแท็บและหน้าต่าง sessionStorage จะไม่ช่วยคุณ เว้นแต่คุณจะทำให้ชีวิตของคุณซับซ้อนโดยใช้ตัวฟังเหตุการณ์ เหมือนที่ฉันได้ลองทำ ในขณะเดียวกัน localStorage จะเหมาะสมสำหรับสิ่งนี้ แต่ก็ทำงานได้ 'ดีเกินไป' เพราะข้อมูลของคุณจะรออยู่ที่นั่นแม้หลังจากรีสตาร์ทเบราว์เซอร์ สุดท้ายฉันจึงใช้โค้ดและตรรกะที่กำหนดเองซึ่งใช้ประโยชน์จากทั้งสองแบบ

ฉันอยากจะอธิบายก่อนที่จะให้โค้ด ก่อนอื่นเก็บสิ่งที่คุณต้องการใน localStorage จากนั้นใน localStorage ให้สร้างตัวนับที่จะเก็บจำนวนแท็บที่คุณเปิดอยู่ ตัวนับนี้จะเพิ่มขึ้นทุกครั้งที่หน้าโหลดและลดลงทุกครั้งที่หน้า unload คุณสามารถเลือกเหตุการณ์ที่ต้องการใช้ได้ที่นี่ ฉันแนะนำ 'load' และ 'unload' ในตอนที่คุณ unload คุณจำเป็นต้องทำงานล้างข้อมูลที่คุณต้องการเมื่อค่าตัวนับถึง 0 ซึ่งหมายถึงคุณกำลังปิดแท็บสุดท้าย ต่อมาคือส่วนที่ซับซ้อน: ฉันยังไม่พบวิธีที่เชื่อถือได้และทั่วไปในการบอกความแตกต่างระหว่างการรีโหลดหน้าหรือการนำทางภายในหน้า กับ การปิดแท็บ ดังนั้นถ้าข้อมูลที่คุณเก็บไม่ใช่สิ่งที่คุณสามารถสร้างใหม่ได้เมื่อโหลดหลังจากตรวจสอบว่านี่คือแท็บแรกของคุณ คุณจึงไม่สามารถลบมันได้ทุกครั้งที่รีเฟรช แทนที่จะเป็นเช่นนั้น คุณจำเป็นต้องเก็บแฟล็กใน sessionStorage ทุกครั้งที่โหลดก่อนเพิ่มตัวนับแท็บ ก่อนเก็บค่านี้ คุณสามารถตรวจสอบดูว่ามีค่าอยู่แล้วหรือไม่ หากไม่มีค่านี้ หมายความว่าคุณกำลังโหลดเข้ามาในเซสชันนี้เป็นครั้งแรก ซึ่งหมายความว่าคุณสามารถทำความสะอาดเมื่อโหลดได้ หากค่านี้ยังไม่ได้ตั้งค่าและตัวนับเป็น 0.

คำตอบ #7

ใช้ sessionStorage

วัตถุ sessionStorage เท่ากับวัตถุ localStorage แตกต่างกันตรงที่มันเก็บข้อมูลเพียงแค่หนึ่งเซสชัน ข้อมูลจะถูกลบเมื่อผู้ใช้ปิดหน้าต่างเบราว์เซอร์

ตัวอย่างต่อไปนี้นับจำนวนครั้งที่ผู้ใช้คลิกปุ่ม ในเซสชันปัจจุบัน:

ตัวอย่าง

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

คำตอบ #8

ลองใช้

$(window).unload(function(){
  localStorage.clear();
});

หวังว่านี่จะใช้ได้สำหรับคุณ

คำตอบ #9

ผ่านมา 8.5 ปีแล้ว และคำถามเดิมก็ยังไม่ได้รับคำตอบเลย

เมื่อปิดเบราว์เซอร์และไม่ใช่แท็บเดียว

โค้ดตัวอย่างพื้นฐานนี้จะให้คุณได้ทั้งสองโลก การจัดเก็บข้อมูลที่อยู่ได้เพียงช่วงเวลาของเซสชันเบราว์เซอร์ (เหมือน sessionStorage) แต่ก็สามารถแชร์ระหว่างแท็บได้ด้วย (localStorage)

มันทำเช่นนี้โดยผ่าน localStorage อย่างเดียว

function cleanup(){
    // place whatever cleanup logic you want here, for example:
    // window.localStorage.removeItem('my-item')
}

function tabOpened(){
    const tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === null) {
        window.localStorage.setItem('tabs', 1)
    } else {
        window.localStorage.setItem('tabs', ++tabs)
    }
}

function tabClosed(){
    const tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === 1) {
        // last tab closed, perform cleanup.
        window.localStorage.removeItem('tabs')
        cleanup()
    } else {
        window.localStorage.setItem('tabs', --tabs)
    }
}

window.onload = function () {
    tabOpened();
}

window.onbeforeunload = function () {
    tabClosed();
}

คำตอบ #10

มีวิธีให้เลือกห้าวิธี:

• setItem(): เพิ่มคีย์และค่าลงใน localStorage
• getItem(): ดึงค่าตามคีย์จาก localStorage
• removeItem(): ลบไอเทมโดยใช้คีย์จาก localStorage
• clear(): ล้าง localStorage ทั้งหมด
• key(): ส่งตัวเลขเพื่อดึงคีย์ลำดับที่ n ของ localStorage

คุณสามารถใช้ clear() วิธีนี้ เมื่อถูกเรียกใช้จะล้างข้อมูลทั้งหมดในพื้นที่เก็บข้อมูลของโดเมนนี้ มันไม่รับพารามิเตอร์ใด ๆ

window.localStorage.clear();