Хранить данные на вкладке браузера

У меня есть веб-приложение, в котором хранится информация о недавно посещенных страницах, давайте назовем их A. Когда пользователь посещает другой тип страницы, называемый B, я отображаю меню вверху с помощью кнопки, указывающей на последнюю посещенную A-страницу. B-страницы доступны либо через страницу A, либо через страницу B и могут рассматриваться пользователем как свойство A.

Это работает нормально, но становится проблемой, когда кто-то открывает две вкладки, и когда он находится на B-странице на вкладке 1 со ссылкой на A-страницу A1, он открывает новую вкладку и посещает A-страницу A2. Когда пользователь обновляет B-страницу на вкладке 1, меню изменяется на A2. Я хотел бы иметь возможность определить, какая вкладка используется, чтобы я мог сохранить A1 для вкладки 1, чтобы она не изменилась на A2.

При использовании одной вкладки:

A1 -> B1 -> B2 (the menu points back to A1)

При использовании двух вкладок:

Time            | T1       | T2       | T3          
----------------+----------+----------+-------------
Tab 1:          | A1 -> B1 |          | [refresh B1]
Tab 2:          |          | A2 -> B3 |             
----------------+----------+----------+-------------
Menu points to: | A1    A1 | A2    A2 | A2

Это сбивает с толку пользователей, когда они возвращаются на вкладке 1 и приходят к пользователю, которого они просматривали на вкладке 2 (A2) вместо A1.

Я боюсь, что невозможно получить идентификатор вкладки браузера, но у кого-то могут быть какие-либо идеи обходного пути?

Источник

3 ответа

Решение

Изменить: с течением времени мой первоначальный ответ от 2012 года сделал неверным. Как отмечает bedrin, теперь вы можете использовать Window.sessionStorage объект:

Свойство sessionStorage позволяет получить доступ к объекту хранения сеанса для текущего источника. sessionStorage аналогичен Window.localStorage, единственное отличие состоит в том, что данные, хранящиеся в localStorage, не имеют установленного срока действия, а данные, хранящиеся в sessionStorage, очищаются по окончании сеанса страницы. Сеанс страницы длится до тех пор, пока браузер открыт и выживает после перезагрузки и восстановления страницы. Открытие страницы в новой вкладке или окне приведет к запуску нового сеанса, который отличается от того, как работают сеансовые куки.

Оригинальный ответ (2012):

Я боюсь, что это невозможно сделать портативным способом, так как вы сами узнали, что невозможно получить что-то вроде идентификатора вкладки браузера. Насколько мне известно, стандарты HTML совершенно не знают о вкладках в браузерах.

Единственный обходной путь, о котором я могу подумать, заключается в следующем: внедрить и управлять вкладками в вашем приложении. Я видел несколько бизнес-веб-приложений, которые делают это, но (imho) пользовательский опыт довольно плохой.

Источник

HTML5 sessionStorage решает эту проблему:

Сайты могут добавлять данные в хранилище сеансов, и они будут доступны для любой страницы с того же сайта, открытого в этом окне.

Поддерживается всеми современными браузерами

Другой подход заключается в использовании window.name имущество. Это зависит от вкладки / окна и останется неизменным при навигации в браузере. Таким образом, вы можете хранить некоторый король табуляции внутри вашего window.name имущество

Источник

Итак, я сделал одно решение, которое, кажется, работает довольно хорошо. Смотрите последнюю проблему-пулю. Я все еще надеюсь на лучшие идеи, поэтому, пожалуйста, дайте мне знать, если у вас есть!

Тем не мение; вот как я это сделал. Имейте в виду, что это не 100% надежное решение, если пользователь "плохо себя ведет" и обновляет несколько вкладок одновременно, это может привести к путанице:

base.html (который наследует все страницы) ({{ A }} отображает переменную из Django):

// This is executed right before leaving the page
window.onunload = function() {
    if( '{{ A }}' != null ) 
        var prev_A = '{{ A }}';
    else if (typeof previous_A != 'undefined') {
        var prev_A = previous_A;
    else 
        var prev_A = '';
    localStorage.setItem('a', prev_A);
};
// Remove the local storage as soon as you get to this page
localStorage.removeItem('a');

B_base.html (базовый шаблон всех B. B_base.html также наследует base.html. Я поместил этот код для выполнения непосредственно перед кодом в base.html)

var previous_A = localStorage.getItem('a');

Таким образом, в основном я получаю, что каждая страница устанавливает localStorage "a", когда покидает страницу, и удаляет localStorage "a", как только она входит на страницу, за исключением B-страниц, которые сначала сохраняют "a" как локальный переменная перед его удалением.

Проблемы:

  • Открытие ссылок на нескольких вкладках одновременно перезапишет эту переменную, и одна вкладка будет без предыдущей_A.
  • Закрытие вкладки A без перехода в другое место, а затем открытие новой B-страницы напрямую приведет к тому, что B-вкладка имеет значение закрытой A в своем предыдущем_A.
  • Открытые B-ссылки в новых вкладках с A-страницы не дают им обратную ссылку... Это нарушитель.
Источник
Другие вопросы по тегам