javascript - 使用 JavaScript 在请求之间传递一次性值的最佳方式

标签 javascript history.js html5-history

我需要通过 JS 触发页面重新加载,同时保留垂直滚动位置。

我正在使用 another SO question 中描述的解决方案:

  1. 计算当前滚动位置
  2. 将当前位置添加为查询字符串参数,然后重定向
  3. 当页面重新加载时,从查询字符串中读取值并调整滚动位置

但是,我只想恢复第一个重定向的滚动位置。如果用户滚动页面然后使用 Ctrl-R 触发手动重新加载,我不想重新滚动到那个保存的位置。

是否有某种方法可以仅使用 JavaScript 传递一次性的、仅对下一个请求可见的值?或者从 document.location.href 中删除一个值 而不 重定向?

我是否应该使用 HTML 5 History API 来“清除”我使用过的位置值?

最佳答案

将值保存到 sessionStorage。使用后,删除该值,以便在手动刷新时无法读取它。

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

session 存储is really well-supported -- 它将适用于 IE8+ 任何相关版本的其他浏览器。


StackOverflow 通过将帖子 ID 存储在 URL 哈希中来处理页面加载后的滚动。你也可以这样做。

网址 stackoverflow.com/...../21485393#21485393 #21485393 与 anchor 元素 <a name="21485393"></a> 匹配它会在页面加载后自动滚动到该元素。

你也可以做类似的事情。

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

检索它

window.location.hash

完成后将其删除

window.location.hash = ""

关于javascript - 使用 JavaScript 在请求之间传递一次性值的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21485306/

相关文章:

javascript - Pathjs路由问题

html - History.js 与 window.history 仅用于 HTML5 模式

JavaScript 运行函数 keydown

ajax - 具有 SEO 友好的 ajax 和历史记录的单页网站

javascript - IE 在 ajaxified 网站上调用函数两次

react-router - 网址栏中的父路径重复

javascript - 我怎样才能检测到 Vue $router.back() 已完成,而不是空历史堆栈的情况?

javascript - RabbitMQ(和 Node.js)中的异步确认

javascript - 如何检测包含的关系是否正在加载

javascript - 我无法使用 jQuery 和 php 更改数据库中的单词