Лучший способ передать одноразовое значение между запросами с помощью JavaScript

Мне нужно вызвать перезагрузку страницы через JS, сохраняя положение вертикальной прокрутки.

Я использую решение, описанное в другом вопросе SO:

  1. Вычислить текущую позицию прокрутки
  2. Добавьте текущую позицию в качестве аргумента строки запроса, затем перенаправьте
  3. Когда страница перезагрузится, прочитайте значение из строки запроса и отрегулируйте положение прокрутки.

Однако я хочу восстановить положение прокрутки только при ПЕРВОЙ переадресации. Если пользователь прокручивает страницу, а затем запускает ручную перезагрузку с помощью Ctrl-R, я НЕ хочу повторно прокручивать до этой сохраненной позиции.

Есть ли способ передать одноразовое значение, видимое только для следующего запроса, используя ТОЛЬКО JavaScript? Или удалить значение из document.location.href без перенаправления?

Должен ли я использовать API истории HTML 5, чтобы «очистить» значение позиции после того, как я его использовал?


javascript history.js html5-history
person Seth Petry-Johnson    schedule 31.01.2014    source источник
comment
Моя первая мысль - использовать cookie/сеанс для хранения этой переменной, а затем удалить ее после того, как вы ее использовали.   -  person Populus    schedule 31.01.2014
comment
@Populus, я тоже думал об использовании файлов cookie, но не могу использовать фиксированное имя файла cookie, иначе у меня могут возникнуть проблемы, если у одного пользователя открыто несколько вкладок на разных страницах, каждая из которых пытается использовать эту функцию. Хотя, как и в случае с localStorage, я полагаю, что мог бы использовать полный URL-адрес для создания уникального имени файла cookie, чтобы избежать конфликтов.   -  person Seth Petry-Johnson    schedule 01.02.2014
comment
как насчет того, чтобы обновить не всю страницу, а только ту ее часть, которую нужно обновить?   -  person Populus    schedule 01.02.2014
comment
@Populus, это долгосрочная цель, но в данном конкретном случае мне нужно полное обновление страницы.   -  person Seth Petry-Johnson    schedule 01.02.2014

Ответы (1)


arrow_upward
2
arrow_downward

Сохраните значение в sessionStorage. После того, как вы его используете, удалите значение, чтобы его нельзя было прочитать при ручном обновлении.

sessionStorage.setItem("scroll_position", "300");
sessionStorage.getItem("scroll_position"); // 300
sessionStorage.removeItem("scroll_position");

sessionStorage действительно хорошо поддерживается — он будет нормально работать для IE8+ любой соответствующей версии другого браузеры.

StackOverflow обрабатывает прокрутку после загрузки страницы, сохраняя идентификаторы сообщений в хеше URL. Вы могли бы сделать это, а также.

URL-адрес stackoverflow. com/...../21485393#21485393 имеет #21485393, который соответствует якорному элементу <a name="21485393"></a> Он будет автоматически прокручиваться до этого элемента после загрузки страницы.

Вы тоже можете сделать что-то подобное.

http://your.url.com/page#300

Получить его с

window.location.hash

И удалите его, как только вы закончите

window.location.hash = ""
person Cory Danielson    schedule 31.01.2014
comment
На полпути предложил то же самое! - person ChrisIPowell; 31.01.2014
comment
localStorage — это круто. Это так широко поддерживается ... такой ниндзя - person Cory Danielson; 31.01.2014
comment
Я думал о localStorage, но думал, что это хранилище для каждого браузера, а не хранилище для каждой вкладки браузера, что означает, что у меня могут возникнуть проблемы, если у пользователей открыто несколько вкладок. Я полагаю, что мог бы просто использовать полный URL-адрес при создании ключа... - person Seth Petry-Johnson; 01.02.2014
comment
отредактировал мой ответ. Вместо этого используйте sessionStorage. Это экземпляр localStorage, который уникален для вкладок/окон (даже с одним и тем же URL-адресом) и работает точно так же, как localStorage. см. stackoverflow.com/questions/9742395/ - person Cory Danielson; 01.02.2014
comment
даже лучше! И да, не могу поверить, что IE8 его поддерживает! - person ChrisIPowell; 01.02.2014