it-swarm.asia

كيفية حذف عنصر 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;
});
332
Yosef

يجب أن يتم ذلك وليس مع حذف عامل التشغيل:

localStorage.removeItem(key);
694
Yosef

استخدم مع window الكلمة الأساسية العالمية: -

 window.localStorage.removeItem('keyName');
92
vineet

يمكنك الاستفادة من الحدث beforeunload في JavaScript.

باستخدام Vanilla JavaScript ، يمكنك القيام بشيء مثل:

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

سيؤدي ذلك إلى حذف المفتاح قبل إغلاق نافذة/علامة تبويب المتصفح ويطالبك بتأكيد إجراء إغلاق النافذة/علامة التبويب. آمل أن يحل مشكلتك.

ملاحظة: يجب أن ترجع الأسلوب onbeforeunload سلسلة.

90
MT.

يجب عليك استخدام sessionStorage بدلاً من ذلك إذا كنت تريد حذف المفتاح عند إغلاق المتصفح.

86
Graou13

جرب استخدام

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

أتمنى أن يكون هذا مناسبا لك

17
Rafael Marques

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

أفضل أن أشرح الكود. قم أولاً بتخزين ما تحتاج إليه في localStorage ، ثم أيضًا في localStorage قم بإنشاء عداد يحتوي على عدد علامات التبويب التي فتحتها. ستتم زيادة ذلك في كل مرة يتم فيها تحميل الصفحة وتنخفض في كل مرة يتم فيها تحميل الصفحة. يمكنك اختيار الأحداث التي تريد استخدامها هنا ، أقترح "تحميل" و "إلغاء تحميل". في الوقت الذي تقوم فيه بإلغاء التحميل ، تحتاج إلى القيام بمهام التنظيف التي تريدها عندما تصل العداد إلى 0 ، مما يعني أنك تغلق علامة التبويب الأخيرة. هنا يأتي الجزء الصعب: لم أجد طريقة موثوقة وعامة لمعرفة الفرق بين إعادة تحميل الصفحة أو التنقل داخل الصفحة وإغلاق علامة التبويب. لذلك إذا كانت البيانات التي تقوم بتخزينها ليست شيئًا يمكنك إعادة إنشائه عند التحميل بعد التحقق من أن هذه علامة تبويبك الأولى ، فلا يمكنك إزالتها عند كل تحديث. بدلاً من ذلك ، تحتاج إلى تخزين علامة في sessionStorage عند كل حمل قبل زيادة عداد علامات التبويب. قبل تخزين هذه القيمة ، يمكنك إجراء فحص لمعرفة ما إذا كانت لها بالفعل قيمة وإذا لم تكن كذلك ، فهذا يعني أنك تقوم بالتحميل في هذه الجلسة لأول مرة ، مما يعني أنه يمكنك إجراء التنظيف عند التحميل إذا كان هذا لم يتم تعيين القيمة والعداد هو 0.

12
Solthun

استخدام 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.";
9
DilanG
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]);
}
6
Gil Snovsky

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

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

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

آمل أن يساعد.

4
user1012513

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

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

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

3
wjfinder77

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

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

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

3
miztaken

بعد النظر في هذا السؤال بعد 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] ، لا يتم مسح التخزين المحلي
3
Hacktisch

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

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 .

3
rdonatoiop

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

في حالة الرغبة في تخزين المصادقة أو أي معلومات حساسة يتم إتلافها فقط عند إغلاق المستعرض ، يمكنك الاعتماد على 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/

0
xryl669