синхронизация вкладок через localStorage, вебсокет.

[Sevic]

Пытаюсь сделать синхронизацию вкладок с помощью localStorage. Хочу сделать одно подключение вебсокет на браузер, допустим на главную вкладку. Это вкладка обрабатывает данные с вебсокета и затем заносит эти данные в localstorage, остальные вкладки по событию storage получают данные и также обрабатывают их.

код на главной вкладке:

socket.onmessage = function(e) {
    // ... обрабатываю данные для текущей вкладки ...
		
    localStorage.setItem('key', JSON.stringify(e.data));
    localStorage.removeItem('key');
}

код на второстепенной вкладке:

window.addEventListener('storage', function() {
    let data = JSON.parse(localStorage.getItem('key'));
    // ... обрабатываю data для текущей вкладки ...
})

Тестирую на локальном сервере, все работает, все вкладки получают данные. Но что если данные будут приходить очень часто, каждые несколько миллисекунд новые данные, второстепенные вкладки будут получать все данные или что-то пропустят?

[Nexus]

Я думаю, что ничего не потеряется, если брать данные из события, а не из хранилища.

Чтобы не выполнять ненужные операции по несколько тысяч раз в секунду можно воспользоваться троттлингом.

В любом случае, проверить происходит ли потеря данных не так сложно.

Первая вкладка:

var buffer = [];
addEventListener('storage', function (e) {
    buffer.push(e);
});

Вторая вкладка:

for (let i = 0; i < 100; i++) {
    setTimeout(i => {
        localStorage.setItem('test', `loop: ${i}`);
    }, 10, i);
}

После запуска кода во второй вкладке просто обратитесь к переменной buffer в первой вкладке и посмотрите сколько событий было записано в массив.

[Sevic]

Объект события - это то, что нужно: e.key, e.newValue. Никаких потерь.
Большое спасибо!