Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

请记录页面状态

  在浏览一些网站的时候,本来一页页看着挺舒服,这时候网络突然抽了个风,某个请求失败了。而且程序没有重新请求的机制,导致页面上出现无限旋转的菊花,于是迫不得已刷新了页面。可是刷新后才发现,页面没有保存状态,我再也找不到之前看到的部分了。
  这种不记录页面状态的东西总是会用得很憋屈!最近用某管理系统的时候里面有个纯前端实现的 filter 的功能,而这个 filter 是非常有用的,如果没有它很难找到所需的数据。可是由于它只是记录在内存里的,每次页面刷新后 filter 都必须重填,用起来非常麻烦。总之这种问题我都能列举出一大坨,相信大家也经常遇到?所以我觉得,记录页面状态是非常重要的!
  前几天刚刚喷了那些不用 URL 保存 filter 的做法 说的就是这个问题。虽然对于一些带权限的管理系统而言,根本就没有 URL 分享之类的需求,那我们就完全不用考虑在 URL 中加入用户的操作状态信息了么?对于用户私有的页面也同样存在状态,它们不会以链接的形式被分享,但也应该考虑刷新的情况。
  前端程序是页面级的,当页面刷新后,整个页面的程序都重新执行,所有以变量形式存储在内存里的数据就全部丢失了。所以有些关键的数据我们应该保持在变量之外的地方,不光是 URL,还有 localStorage、sessionStorage、Cookie 等很多具有本地存储性质的东西都可以用。
  加一个这样的功能并不难,localStorage 可以兼容到 IE8(如果还在为更低的浏览器做兼容我也不想说什么了),大概两行代码就可以解决问题,只不过没有做什么封装的话代码会有点难看。大概这样 <input id="f" placeholder="filter..." />
<script>
f.value = localStorage.getItem('f.value');
f.onchange = () => localStorage.setItem('f.value', f.value);
</script>
  举手之劳而已吧?
  其实昨天刚喷了 Firefox 刷新不能重置表单 的问题,和这篇应该是不冲突的。因为 Firefox 虽然希望做一件对的事,然它提供的东西是不可控的,不适合直接使用。我们应该学习它的思想,把它想做却没做好的事情给做好了,而不是光喷它。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^