Непонимание концепции локального хранилища

Question

Я использую этот код, опубликованный Саси Варунаном здесь

<script type="text/javascript">
        // Broad cast that your're opening a page.
        localStorage.openpages = Date.now();

        var onLocalStorageEvent = function(e){
            if(e.key == "openpages"){
                // Listen if anybody else opening the same page!
                localStorage.page_available = Date.now();
            }
            if(e.key == "page_available"){
                alert("One more page already open");
            }
        };
        window.addEventListener('storage', onLocalStorageEvent, false);
</script>

Код работает как шарм - делает именно то, что я хочу - обнаруживаю липриложение уже открыто в другом браузере вкладок или даже в другом окне браузера.

Насколько я понимаю:

При первом запуске приложения происходит следующее:

1. App set openpages ключ со значением Date.now().
2. Из-за 1. запуска прослушивателя событий хранилища onLocalStorageEvent событие.
3. Поскольку ключ openpages существует,установка ключа page_available с помощью Date.now ()
4. Когда запускаются следующие приложения, они находят в хранилище ключ page_available (второй, если), срабатывает предупреждение, и я могу перенаправить их на страницу ошибки.

ВОПРОС:

Если я закрою все окна браузера и перезапущу приложение в новом окне, все будет работать нормально.

Это то, что я не понимаю, потому что клавиша page_available постоянно находится в хранилище (никто не удалил), приложение должно идти на втором, если и что предупреждение ... но этоне происходит.

Answer 1

При первом запуске приложения происходит следующее:

1. Набор приложений openpages ключ со значением Date.now().
2. Из-за 1. обработчик событий запуска onLocalStorageEvent событие.
3. Поскольку ключ openpages существует, он устанавливает ключ page_available с помощью Date.now ()
4. Когда запускаются следующие приложения, они находятpage_available введите в хранилище (второе, если), предупреждение сработало, и я могу перенаправить их на страницу ошибки.

Вся идея здесь заключается в том, чтобы общаться между вкладками с помощью storage событие, которое вызывается каждый раз, когда вы получаете доступ к localStorage.

. Поэтому, когда страница загружается, она сначала получает доступ к клавише openpages, чтобы вызвать событие storage с помощью e.key == "openpages".

Только после этого регистрирует прослушиватель событий.Так что 2 происходит только тогда, когда вы загружаете страницу на второй вкладке.На второй вкладке событие запускается и слушатель события регистрируется.Поскольку событие storage запускается для всех вкладок, выполняется прослушиватель событий первой вкладки (который уже зарегистрирован).

Tab 1 запускается событием storage с e.key == "openpages"и попадает в первый if.Там он запускает событие storage, получая доступ к клавише page_available.

В этот момент слушатель события вкладки 2 реагирует на событие storage, но на этот раз с e.key == "page_available" и попадает во вторую ifгде отображается предупреждение.

Обратите внимание, что если вы не закроете вкладки и не откроете больше вкладок, вкладка 3 вызовет событие storage для всех остальных вкладок, и у вас будет несколько вкладок с предупреждениями.

---

Просто для справки:

Если вы хотите активировать предупреждение на первой, а не на второй вкладке, вы можете получить его с помощью этого кода:

// Broadcast that you're opening the page.
localStorage.openpage = Date.now();

var onLocalStorageEvent = function(e) {
  if (e.key == "openpage") {
    alert("One more page already open");
  }
};
window.addEventListener('storage', onLocalStorageEvent);

---

Подробнее о localStorage здесь .
Подробнее о addEventListener здесь .

Answer 2

После перезапуска окна браузера все по-прежнему работает нормально, и я не понимаю, почему, потому что ключ page_available все еще находится в хранилище

Это потому, что localStorage не имеетдата истечения срока действия, противоположная sessionStorage.sessionStorage очищается после закрытия браузера, но localStorage остается.

Вы все еще можете очистить localStorage, очистив кэш браузера и файлы cookie

Также этот фрагмент localStorage.openpages = Date.now(); кажется неправильным.

Если вы хотите установить значение в localStorage, сделайте так

localStorage.setItem('openpages',Date.now());