Событие localStorage не срабатывает, когда я запускаю его через консоль - PullRequest
Новая
       14

Событие localStorage не срабатывает, когда я запускаю его через консоль

0 голосов
/ 29 апреля 2018

Я работаю над приложением чата, которое может общаться через вкладки, поэтому я использую localStorage для этого. Хорошо, чтобы воспроизвести проблему:

  1. дважды откройте этот URL, чтобы у вас было 2 открытых вкладки. https://preview.c9users.io/gorgamite/socket/science.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io

  2. Введите что-нибудь в поле приглашения, и вы увидите это на другой вкладке. Происходит то, что оно устанавливается как значение локального хранилища, и существует событие хранения, которое запускается, когда вы вводите что-то в приглашение.

  3. Откройте новую вкладку и запустите этот код: localStorage.setItem("Test", "Hello");

Когда вы делаете это через консоль, событие хранилища не срабатывает. Это работает, только если его часть JavaScript на веб-сайте. Как я могу изменить это? Почему событие хранилища не гаснет, когда вы изменяете значение localStorage через консоль?

Вот код сайта: 

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 id = "thing"></h1>
<script>
localStorage.setItem("Test", prompt("Localstorage value:"));
window.onstorage = function(e){
alert(e.newValue); console.log(e);
document.getElementById("thing").innerHTML += e.newValue;
 };
  </script>
 </body>
 </html>

Ответы [ 2 ]

0 голосов
/ 29 апреля 2018

[Изменить]

В размещенном коде используется подсказка. Это блокирующий вызов. Код не добавляет обработчик событий storage до тех пор, пока не будет установлено хранилище. Таким образом, ничего не произойдет в открытой вкладке в ответ на storage events до тех пор, пока не будет отклонено сообщение, возникшее при загрузке страницы.

При первом закрытии окна подсказки добавляется обработчик события storage только на этой вкладке (назовите его «tab 1»). Теперь, если вы введете значение на другой открытой вкладке (назовите его «вкладка 2»), обработчик на «вкладке 1» будет уведомлен об обновлении и обновит заголовок на «вкладке 1».

После первого закрытия приглашения на обеих открытых вкладках вы можете

  • перезагрузите любую вкладку, введите значение в командной строке и нажмите OK. На перезагруженной вкладке ничего не происходит (только частично, потому что у нее нет обработчика onstorage после перезагрузки). Но другая вкладка уведомлена об обновлении и запускает обработчик событий storage, который оповещает о новом значении.

  • откройте консоль на любой вкладке из того же домена, введите и введите

    localStorage.setItem("Test", prompt("Localstorage value:"));

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

  • откройте консоль на другой вкладке, которая не принадлежит тому же домену, вставьте некоторый код для установки локального хранилища и отправьте отчет. Предупреждение: это может повредить локальное хранилище для используемого домена, если оно работает. Как вариант, поверьте мне на слово: тестовые вкладки "tab1" и "tab2" не будут затронуты.

Почему

A StorageEvent отправляется окну, когда область хранения, к которой он имеет доступ, изменяется в контексте другого документа. (MDN's StorageEvent )

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

0 голосов
/ 29 апреля 2018

Кажется, что JavaScript в вашем коде работает так, как задумано, по крайней мере, в Chrome. Я предполагаю, что вы попробовали это, но чтобы быть уверенным, я вставил следующее в консоль одной вкладки: 

localStorage.setItem("Test", prompt("Localstorage value:"));
  window.onstorage = function(e){
  alert(e.newValue); console.log(e);
  document.getElementById("thing").innerHTML += e.newValue;
};

И проверил тест в другой вкладке: 

localStorage.setItem("Test", "Hello");

Возможно, вы захотите убедиться, что localStorage включен в настройках вашего браузера. Вы можете сделать это в Chrome: Возможно, стоит попробовать очистить кэш и куки.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...