วิธีการลบรายการ 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;
});

ควรทำเช่นนั้นและไม่ใช่กับตัวดำเนินการลบ:

localStorage.removeItem(key);

ใช้กับwindowคำหลักทั่วโลก: -

 window.localStorage.removeItem('keyName');

คุณสามารถใช้ประโยชน์จาก beforeunloadเหตุการณ์ใน JavaScript

ใช้ vanilla JavaScript คุณสามารถทำสิ่งที่ชอบ:

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

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

หมายเหตุ: onbeforeunloadวิธีการควรส่งคืนสตริง

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

ลองใช้ดู

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

หวังว่านี่จะเป็นประโยชน์สำหรับคุณ

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

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

ใช้ 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.";

for (let i = 0; i < localStorage.length; i++) {
    if (localStorage.key(i).indexOf('the-name-to-delete') > -1) {
        arr.push(localStorage.key(i));
    }
}

for (let i = 0; i < arr.length; i++) {
    localStorage.removeItem(arr[i]);
}

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

แม้ว่าผู้ใช้บางคนตอบคำถามนี้ไปแล้ว แต่ฉันขอยกตัวอย่างการตั้งค่าแอปพลิเคชันเพื่อแก้ไขปัญหานี้

ฉันมีปัญหาเดียวกัน ฉันใช้https://github.com/grevory/angular-local-storageโมดูลในแอปพลิเคชันของ angularjs ของฉัน หากคุณกำหนดค่าแอปของคุณดังต่อไปนี้แอปจะบันทึกตัวแปรในที่เก็บข้อมูลเซสชันแทนที่จัดเก็บในตัวเครื่อง ดังนั้นหากคุณปิดเบราว์เซอร์หรือปิดแท็บที่เก็บข้อมูลเซสชันจะถูกลบโดยอัตโนมัติ คุณไม่จำเป็นต้องทำอะไร

app.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
  .setPrefix('myApp')
  .setStorageType('sessionStorage')
});

หวังว่ามันจะช่วย

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

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

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

window.localStorage.clear();

นี่คือการทดสอบง่ายๆเพื่อดูว่าคุณมีการสนับสนุนเบราว์เซอร์เมื่อทำงานกับที่เก็บข้อมูลในเครื่องหรือไม่:

if(typeof(Storage)!=="undefined") {
  console.log("localStorage and sessionStorage support!");
  console.log("About to save:");
  console.log(localStorage);
  localStorage["somekey"] = 'hello';
  console.log("Key saved:");
  console.log(localStorage);
  localStorage.removeItem("somekey");  //<--- key deleted here
  console.log("key deleted:");
  console.log(localStorage);
  console.log("DONE ===");
} else {
  console.log("Sorry! No web storage support..");
}

ใช้งานได้ตามที่คาดหวัง (ฉันใช้ Google Chrome) ที่ดัดแปลงมาจาก: http://www.w3schools.com/html/html5_webstorage.asp

ฉันไม่คิดว่าวิธีแก้ปัญหาที่นำเสนอที่นี่ถูกต้อง 100% เพราะเหตุการณ์ window.onbeforeunload ถูกเรียกว่าไม่เฉพาะเมื่อปิดเบราว์เซอร์ / แท็บ (ซึ่งจำเป็นต้องมี) แต่ยังรวมถึงเหตุการณ์อื่น ๆ อีกมากมาย (ซึ่งอาจไม่จำเป็นต้องใช้)

ดูลิงค์นี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับรายการของเหตุการณ์ที่สามารถยิง window.onbeforeunload: -

http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

ทำไมไม่ใช้ sessionStorage

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

http://www.w3schools.com/html/html5_webstorage.asp

หลังจากดูคำถามนี้ 6 ปีหลังจากถามฉันพบว่ายังไม่มีคำตอบที่เพียงพอสำหรับคำถามนี้ ซึ่งควรทำตามทั้งหมดต่อไปนี้:

• ล้าง Local Storage หลังจากปิดเบราว์เซอร์ (หรือแท็บทั้งหมดของโดเมน)
• เก็บรักษาที่จัดเก็บในตัวเครื่องข้ามแท็บหากมีอย่างน้อยหนึ่งแท็บที่ยังคงใช้งานอยู่
• เก็บรักษาที่จัดเก็บในตัวเครื่องเมื่อรีโหลดแท็บเดียว

ดำเนินการ javascript ส่วนนี้เมื่อเริ่มต้นของแต่ละหน้าโหลดเพื่อให้บรรลุข้างต้น:

((nm,tm) => {
    const
            l = localStorage,
            s = sessionStorage,
            tabid = s.getItem(tm) || (newid => s.setItem(tm, newid) || newid)((Math.random() * 1e8).toFixed()),
            update = set => {
                let cur = JSON.parse(l.getItem(nm) || '{}');
                if (set && typeof cur[tabid] == 'undefined' && !Object.values(cur).reduce((a, b) => a + b, 0)) {
                    l.clear();
                    cur = {};
                }
                cur[tabid] = set;
                l.setItem(nm, JSON.stringify(cur));
            };
    update(1);
    window.onbeforeunload = () => update(0);
})('tabs','tabid');

แก้ไข:แนวคิดพื้นฐานที่นี่มีดังต่อไปนี้:

1. เมื่อเริ่มต้นจากศูนย์หน่วยเก็บข้อมูลเซสชันจะกำหนดรหัสสุ่มในคีย์ที่เรียกว่า tabid
2. หน่วยเก็บภายในเครื่องจะถูกตั้งค่าด้วยคีย์ที่เรียกว่าtabsประกอบด้วยวัตถุเหล่านั้นคีย์tabidถูกตั้งค่าเป็น 1
3. เมื่อแท็บถูกยกเลิกการโหลดที่จัดเก็บในตัวเครื่องtabsจะถูกอัพเดตเป็นวัตถุที่มีtabidชุดเป็น 0
4. หากแท็บถูกโหลดซ้ำแท็บนั้นจะถูกยกเลิกการโหลดครั้งแรกและกลับมาทำงานต่อ เนื่องจากคีย์ของที่เก็บข้อมูลเซสชันtabidมีอยู่และtabsคีย์การจัดเก็บในตัวเครื่องมีคีย์ย่อยของtabidหน่วยเก็บข้อมูลภายในจะไม่ถูกล้างออก
5. เมื่อเบราว์เซอร์ถูกยกเลิกการโหลดที่เก็บเซสชันทั้งหมดจะถูกล้าง เมื่อดำเนินการต่อที่เก็บข้อมูลเซสชันtabidจะไม่อยู่อีกต่อไปและtabidจะมีการสร้างใหม่ เนื่องจากหน่วยเก็บข้อมูลภายในไม่มีคีย์ย่อยสำหรับสิ่งนี้tabidหรืออื่น ๆtabid (ปิดเซสชันทั้งหมด) จึงถูกล้าง
6. เมื่อมีแท็บที่สร้างขึ้นใหม่tabidจะมีการสร้างขึ้นใหม่ในที่เก็บข้อมูลเซสชัน แต่เนื่องจากมีอย่างน้อยหนึ่งtabs[ tabid] อยู่การจัดเก็บในตัวเครื่องจะไม่ถูกล้างออก

นี่เป็นคำถามเก่า แต่ดูเหมือนว่าไม่มีคำตอบใดที่สมบูรณ์แบบ

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

โดยพื้นฐานแล้วความคิดคือ:

1. คุณบูตจากแท็บก่อนหน้านี้ไม่เปิดดังนั้นทั้งของคุณlocalStorageและsessionStorageว่างเปล่า (ถ้าไม่คุณสามารถล้างlocalStorage) localStorageคุณจะต้องลงทะเบียนเป็นผู้ฟังที่เหตุการณ์ข้อความบน
2. ผู้ใช้รับรองความถูกต้อง / สร้างข้อมูลที่ละเอียดอ่อนบนแท็บนี้ (หรือแท็บอื่น ๆ ที่เปิดในโดเมนของคุณ)
3. คุณอัปเดต the sessionStorageเพื่อเก็บข้อมูลที่ละเอียดอ่อนและใช้localStorageเพื่อเก็บข้อมูลนี้แล้วลบมัน (คุณไม่สนใจเกี่ยวกับเวลาที่นี่เนื่องจากเหตุการณ์ถูกจัดคิวเมื่อมีการเปลี่ยนแปลงข้อมูล) แท็บอื่น ๆ ที่เปิดในเวลานั้นจะถูกเรียกกลับในเหตุการณ์ข้อความและจะอัปเดตsessionStorageด้วยข้อมูลที่ละเอียดอ่อน
4. หากผู้ใช้เปิดแท็บใหม่ในโดเมนของคุณแท็บนั้นsessionStorageจะว่างเปล่า รหัสจะต้องตั้งที่สำคัญในการที่localStorage(สำหรับกันตัวอย่าง: req) แท็บอื่น ๆ (ทั้งหมด) จะถูกเรียกกลับในเหตุการณ์ข้อความดูรหัสนั้นและสามารถตอบด้วยข้อมูลที่ละเอียดอ่อนจากsessionStorage(เช่นใน 3) หากมี

โปรดสังเกตว่ารูปแบบนี้ไม่ได้ขึ้นอยู่กับwindow.onbeforeunloadเหตุการณ์ที่มีความเปราะบาง (เนื่องจากเบราว์เซอร์สามารถปิด / พังได้โดยไม่มีเหตุการณ์เหล่านี้เกิดขึ้น) นอกจากนี้เวลาที่ข้อมูลสำคัญถูกเก็บไว้ในlocalStorageนั้นมีขนาดเล็กมาก (เนื่องจากคุณต้องพึ่งพาการตรวจจับการเปลี่ยนแปลงของ transcients สำหรับเหตุการณ์ข้อความข้ามแท็บ) ดังนั้นจึงไม่น่าเป็นไปได้ที่ข้อมูลสำคัญดังกล่าวจะรั่วไหลบนฮาร์ดไดรฟ์ของผู้ใช้

นี่คือตัวอย่างของแนวคิดนี้: http://jsfiddle.net/oypdwxz7/2/

ไม่มีวิธีตรวจจับเบราว์เซอร์ที่ปิดดังนั้นคุณอาจไม่สามารถลบ localStorage ในการปิดเบราว์เซอร์ แต่มีวิธีอื่นในการจัดการสิ่งที่คุณสามารถใช้ sessionCookies เพราะมันจะทำลายหลังจากปิดเบราว์เซอร์

คุณสามารถใช้ sessionStorage เพราะ sessionStorage อนุญาตให้ล้างค่าคีย์ทั้งหมดเมื่อปิดหน้าต่างเบราว์เซอร์

ดูที่นั่น: SessionStorage- MDN

คุณสามารถลองใช้รหัสต่อไปนี้เพื่อลบที่เก็บข้อมูลในตัวเครื่อง:

delete localStorage.myPageDataArr;