حالتي: 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]);
}
على الرغم من أن بعض المستخدمين أجابوا بالفعل على هذا السؤال بالفعل ، إلا أنني أقدم مثالًا على إعدادات التطبيق لحل هذه المشكلة.
كان لي نفس القضية. أنا أستخدم https://github.com/grevory/angular-local-storage الوحدة النمطية في تطبيق angularjs الخاص بي. إذا قمت بتكوين تطبيقك على النحو التالي ، فسيوفر المتغير في تخزين الجلسة بدلاً من التخزين المحلي. لذلك ، إذا قمت بإغلاق المتصفح أو أغلق علامة التبويب ، فستتم إزالة مساحة الجلسة تلقائيًا. أنت لست بحاجة إلى أن تفعل أي شيء.
app.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('myApp')
.setStorageType('sessionStorage')
});
آمل أن يساعد.
لماذا لا تستخدم sessionStorage؟
"كائن sessionStorage يساوي كائن localStorage ، إلا أنه يخزن البيانات لجلسة واحدة فقط. يتم حذف البيانات عندما يغلق المستخدم نافذة المستعرض."
لا أعتقد أن الحل المقدم هنا صحيح بنسبة 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');
تحرير: الفكرة الأساسية هنا هي التالية:
tabid
tabs
يحتوي على كائن يتم تعيين هذا المفتاح tabid
على 1.tabs
الخاص بوحدة التخزين المحلية إلى كائن يحتوي على tabid
مضبوطًا على 0.tabid
، وكذلك مفتاح التخزين المحلي tabs
مع مفتاح فرعي لـ tabid
لا يتم مسح التخزين المحلي.tabid
، وسيتم إنشاء tabid
جديد. نظرًا لأن وحدة التخزين المحلية لا تحتوي على مفتاح فرعي لهذا tabid
، ولا أي tabid
(جميع الجلسة كانت مغلقة) ، فقد تم محوه.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
لتمرير رسائل علامة تبويب متقاطعة.
في الأساس ، الفكرة هي:
localStorage
و sessionStorage
فارغين (إذا لم يكن كذلك ، يمكنك مسح localStorage
). سيكون عليك تسجيل مستمع أحداث الرسائل على localStorage
.sessionStorage
لتخزين المعلومات الحساسة ، واستخدام localStorage
لتخزين هذه المعلومات ، ثم حذفها (لا تهتم بالتوقيت هنا ، لأن الحدث كان في قائمة الانتظار عندما تغيرت البيانات). سيتم استدعاء أي علامة تبويب أخرى يتم فتحها في ذلك الوقت مرة أخرى في حدث الرسالة ، وسيتم تحديث sessionStorage
بالمعلومات الحساسة.sessionStorage
فارغًا. سيتعين على الكود تعيين مفتاح في localStorage
(على سبيل المثال: req
). سيتم استدعاء أي (الكل) علامة تبويب أخرى مرة أخرى في حدث الرسالة ، وانظر هذا المفتاح ، ويمكن الإجابة عن طريق المعلومات الحساسة من sessionStorage
(مثل في 3) ، إذا كان لديهم مثل هذا.يرجى ملاحظة أن هذا المخطط لا يعتمد على window.onbeforeunload
الحدث الهش (حيث يمكن إغلاق المتصفح/تعطله دون إطلاق هذه الأحداث). كذلك ، فإن الوقت الذي يتم فيه تخزين المعلومات الحساسة على localStorage
صغير جدًا (نظرًا لأنك تعتمد على اكتشاف تغيير المتحولين لحدث رسالة علامة تبويب متقاطعة) ، لذا فمن غير المرجح أن تتسرب هذه المعلومات الحساسة على محرك القرص الصلب للمستخدم.
إليك عرض توضيحي لهذا المفهوم: http://jsfiddle.net/oypdwxz7/2/