แก้ไข 2018: คุณควรใช้ BroadcastChannel เพื่อจุดประสงค์นี้ดูคำตอบอื่น ๆ ด้านล่าง แต่ถ้าคุณยังต้องการใช้ localstorage เพื่อการสื่อสารระหว่างแท็บให้ทำเช่นนี้:
เพื่อให้ได้รับการแจ้งเตือนเมื่อแท็บส่งข้อความไปยังแท็บอื่นคุณเพียงแค่ผูกเหตุการณ์ 'พื้นที่จัดเก็บ' ในทุกแท็บให้ทำสิ่งนี้:
$(window).on('storage', message_receive);
ฟังก์ชั่นmessage_receiveจะถูกเรียกทุกครั้งที่คุณตั้งค่าใด ๆ ของ localStorage ในแท็บอื่น ๆ ฟังเหตุการณ์ประกอบด้วยข้อมูลที่เพิ่งตั้งค่าเป็น localStorage ดังนั้นคุณไม่จำเป็นต้องแยกวิเคราะห์อ็อบเจ็กต์ localStorage เอง สิ่งนี้มีประโยชน์มากเพราะคุณสามารถรีเซ็ตค่าได้ทันทีหลังจากตั้งค่าเพื่อล้างร่องรอยใด ๆ ได้อย่างมีประสิทธิภาพ นี่คือฟังก์ชั่นสำหรับการส่งข้อความ:
// use local storage for messaging. Set message in local storage and clear it right away
// This is a safe way how to communicate with other tabs while not leaving any traces
//
function message_broadcast(message)
{
localStorage.setItem('message',JSON.stringify(message));
localStorage.removeItem('message');
}
// receive message
//
function message_receive(ev)
{
if (ev.originalEvent.key!='message') return; // ignore other keys
var message=JSON.parse(ev.originalEvent.newValue);
if (!message) return; // ignore empty msg or msg reset
// here you act on messages.
// you can send objects like { 'command': 'doit', 'data': 'abcd' }
if (message.command == 'doit') alert(message.data);
// etc.
}
ดังนั้นเมื่อแท็บของคุณเชื่อมโยงกับเหตุการณ์ onstorage และคุณได้นำฟังก์ชั่นทั้งสองนี้มาใช้คุณสามารถถ่ายทอดข้อความไปยังแท็บอื่น ๆ ที่กำลังเรียกตัวอย่างเช่น:
message_broadcast({'command':'reset'})
โปรดจำไว้ว่าการส่งข้อความเดียวกันที่แน่นอนสองครั้งจะถูกเผยแพร่เพียงครั้งเดียวดังนั้นหากคุณต้องการทำซ้ำข้อความให้เพิ่มตัวระบุที่ไม่ซ้ำกันให้กับพวกเขาเช่น
message_broadcast({'command':'reset', 'uid': (new Date).getTime()+Math.random()})
โปรดจำไว้ว่าแท็บปัจจุบันที่เผยแพร่ข้อความนั้นไม่ได้รับจริง ๆ มีเพียงแท็บหรือหน้าต่างอื่นในโดเมนเดียวกัน
คุณอาจถามว่าจะเกิดอะไรขึ้นหากผู้ใช้โหลดหน้าเว็บอื่นหรือปิดแท็บของเขาหลังจากการโทร setItem () ก่อนหน้า RemoveItem () จากการทดสอบของฉันเองเบราว์เซอร์จะหยุดการโหลดจนกว่าmessage_broadcast()จะเสร็จสิ้นการทำงานทั้งหมด ฉันทดสอบว่าใส่รอบนานมากสำหรับ () และยังรอให้รอบเสร็จก่อนปิด หากผู้ใช้ฆ่าแท็บในระหว่างนั้นเบราว์เซอร์จะไม่มีเวลาเพียงพอในการบันทึกข้อความไปยังดิสก์ดังนั้นวิธีการนี้ดูเหมือนจะเป็นวิธีที่ปลอดภัยสำหรับฉันในการส่งข้อความโดยไม่มีร่องรอย ยินดีต้อนรับความคิดเห็น