كيفية حذف عنصر localStorage عند إغلاق نافذة/علامة تبويب المتصفح؟

استخدم مع 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]);
}

على الرغم من أن بعض المستخدمين أجابوا بالفعل على هذا السؤال بالفعل ، إلا أنني أقدم مثالًا على إعدادات التطبيق لحل هذه المشكلة.

كان لي نفس القضية. أنا أستخدم https://github.com/grevory/angular-local-storage الوحدة النمطية في تطبيق angularjs الخاص بي. إذا قمت بتكوين تطبيقك على النحو التالي ، فسيوفر المتغير في تخزين الجلسة بدلاً من التخزين المحلي. لذلك ، إذا قمت بإغلاق المتصفح أو أغلق علامة التبويب ، فستتم إزالة مساحة الجلسة تلقائيًا. أنت لست بحاجة إلى أن تفعل أي شيء.

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

آمل أن يساعد.

لماذا لا تستخدم sessionStorage؟

"كائن sessionStorage يساوي كائن localStorage ، إلا أنه يخزن البيانات لجلسة واحدة فقط. يتم حذف البيانات عندما يغلق المستخدم نافذة المستعرض."

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

لا أعتقد أن الحل المقدم هنا صحيح بنسبة 100٪ لأن حدث window.onbeforeunload لا يُسمى فقط عندما يكون المتصفح/علامة تبويب مغلقة (WHICH IS مطلوب) ، ولكن أيضًا في جميع الأحداث العديدة الأخرى. (التي قد لا تكون مطلوبة)

انظر هذا الرابط لمزيد من المعلومات حول قائمة الأحداث التي يمكن أن تطلق النافذة. قبل التحميل: -

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

بعد النظر في هذا السؤال بعد 6 سنوات من طرحه ، وجدت أنه لا توجد إجابة كافية على هذا السؤال ؛ والتي يجب أن تحقق كل ما يلي:

• محو التخزين المحلي بعد إغلاق المتصفح (أو كل علامات تبويب المجال)
• الحفاظ على التخزين المحلي عبر علامات التبويب ، إذا بقيت علامة تبويب واحدة على الأقل نشطة
• الحفاظ على التخزين المحلي عند إعادة تحميل علامة تبويب واحدة

قم بتنفيذ هذا الجزء من جافا سكريبت في بداية كل صفحة تحميل من أجل تحقيق ما سبق:

((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] ، لا يتم مسح التخزين المحلي

إليك اختبار بسيط لمعرفة ما إذا كان لديك دعم للمتصفح عند التعامل مع وحدة التخزين المحلية:

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 .

هذا سؤال قديم ، لكن لا يبدو أن الإجابة المذكورة أعلاه مثالية.

في حالة الرغبة في تخزين المصادقة أو أي معلومات حساسة يتم إتلافها فقط عند إغلاق المستعرض ، يمكنك الاعتماد على sessionStorage و localStorage لتمرير رسائل علامة تبويب متقاطعة.

في الأساس ، الفكرة هي:

1. يمكنك فتح أي علامة تبويب سابقة ، وبالتالي يكون كل من localStorage و sessionStorage فارغين (إذا لم يكن كذلك ، يمكنك مسح localStorage). سيكون عليك تسجيل مستمع أحداث الرسائل على localStorage.
2. يقوم المستخدم بمصادقة/إنشاء معلومات حساسة في علامة التبويب هذه (أو أي علامة تبويب أخرى يتم فتحها في نطاقك).
3. يمكنك تحديث sessionStorage لتخزين المعلومات الحساسة ، واستخدام localStorage لتخزين هذه المعلومات ، ثم حذفها (لا تهتم بالتوقيت هنا ، لأن الحدث كان في قائمة الانتظار عندما تغيرت البيانات). سيتم استدعاء أي علامة تبويب أخرى يتم فتحها في ذلك الوقت مرة أخرى في حدث الرسالة ، وسيتم تحديث sessionStorage بالمعلومات الحساسة.
4. إذا قام المستخدم بفتح علامة تبويب جديدة على نطاقك ، فسيكون sessionStorage فارغًا. سيتعين على الكود تعيين مفتاح في localStorage (على سبيل المثال: req). سيتم استدعاء أي (الكل) علامة تبويب أخرى مرة أخرى في حدث الرسالة ، وانظر هذا المفتاح ، ويمكن الإجابة عن طريق المعلومات الحساسة من sessionStorage (مثل في 3) ، إذا كان لديهم مثل هذا.

يرجى ملاحظة أن هذا المخطط لا يعتمد على window.onbeforeunload الحدث الهش (حيث يمكن إغلاق المتصفح/تعطله دون إطلاق هذه الأحداث). كذلك ، فإن الوقت الذي يتم فيه تخزين المعلومات الحساسة على localStorage صغير جدًا (نظرًا لأنك تعتمد على اكتشاف تغيير المتحولين لحدث رسالة علامة تبويب متقاطعة) ، لذا فمن غير المرجح أن تتسرب هذه المعلومات الحساسة على محرك القرص الصلب للمستخدم.

إليك عرض توضيحي لهذا المفهوم: http://jsfiddle.net/oypdwxz7/2/