位置: 编程技术 - 正文

location.hash保存页面状态的技巧(document.location.hash)

编辑:rootadmin

推荐整理分享location.hash保存页面状态的技巧(document.location.hash),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:hashcat保存进度,location. hash,local sensitive hash,location.host的值,document.location.hash,location. hash,document.location.hash,location. hash,内容如对您有帮助,希望把文章链接给更多的朋友!

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。

语法

location.hash

在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果都回到了默认状态。

如果每次返回页面都要重新输入查询条件,或有甚者还得转到列表的第几页,那这种体验用户真的要抓狂了。

在我们的项目中,写了一个很简单的JavaScript基类来处理location.hash从而保存页面状态,今天在此就分享给大家。

(本文的内容可能对于JavaScript初学者来讲有点难度,因为涉及到JS面向对象的知识,如定义类、继承、虚方法、反射等)

先看看我们的需求

我们的项目是一个基于微信的H5任务管理系统,要完成的页面原型如下图所示:

需求应该都很清晰,就是点击查询表单,用ajax返回查询结果,然后点击列表中的某一个任务进入任务详情页。由于管理员(项目经理)通常会一次处理多个任务,所以就会不断在任务详情页跟查询列表页切换,这时如果按返回键不能保存查询页面状态的话,那每次返回查询页面都要重新输入查询条件,这样的体验肯定是不能忍受的。

所以,我们需要想办法将页面状态保存下来,以便用户按回退键的时候,查询条件和结果都还在。

解决思路

保存页面状态的思路有很多啦,但是我们觉得用location.hash应该是最好的方法。

思路如下:

location.hash保存页面状态的技巧(document.location.hash)

1.用户输入查询条件并点击确定后,我们将查询条件序列化成一个字符串,并通过“#”将查询条件加到url后面得到一个新的url,然后调用location.replace(新的url)修改浏览器地址栏中的地址。

2.当用户按回退键回退到查询页面时,也可以说是页面加载时,将location.hash反序列化成查询条件,然后将查询条件更新到查询表单并执行查询即可。

思路很简单,关键的地方就是location.replace方法,这个方法不仅仅是修改浏览器中地址栏的url,更重要的是会在window.history中替换当前页面的记录。如果不用location.replace方法,那么每次回退都会回退到上一个查询条件。当然,这样的需求可能对某些项目还有用。

最终解决方案

如果本文只是分享上面的解决思路,那价值就不大了。本文的价值应该是我们写的那个虽然简单但是却很强大的JavaScript类。

如果你看明白了上面的解决思路,那就看看这个简单的JavaScript类吧:

这个类只有2个方法,HashQuery.parseFromLocation() 方法从location.hash反序列化为HashQuery子类的实例,HashQuery.updateLocation() 方法将当前HashQuery子类的实例序列化并更新到window.location。

可以看到HashQuery这个类没有任何属性,那是因为我们只定义了一个基类,类的属性都在子类中进行定义。这也是符合实际的,因为查询条件都只有在具体的页面才知道有哪些属性。

另外,请注意这里的序列化和反序列化。这里的序列化仅仅是利用JavaScript反射机制将实例的所有字符串属性(按顺序)的值用“|”分隔;而序列化则是将字符串用“|”分隔后,再利用反射更新到实例的属性(按顺序)。

如何使用HashQuery类

使用的时候就非常简单了。

第一步,定义一个子类,将需要用到的查询条件都加到字符串属性当中,如我们的代码:

第二步,在查询页面调用HashQuery.parseFromLocation() 和 HashQuery.updateLocation()方法即可。下面的代码是我们完整的查询页面:

总结

这就是我们项目中使用location.hash来保存页面状态的全部知识了。不知道大家的WEB项目中是如何处理这样的需求的呢?

以上内容是小编给大家介绍的location.hash保存页面状态的技巧,希望对大家有所帮助!

JS实现的base加密解密完整实例 本文实例讲述了JS实现的base加密解密。分享给大家供大家参考,具体如下:完整的代码:HTMLHEADTITLEBase/TITLEscriptlanguage=javascriptvarbaseEncodeChars="ABCDEFGHI

Bootstrap Chart组件使用教程 Bootstrap是由前Twitter设计师MarkOtto和JacobThornton开发的前端工具包,其提供了优雅的HTML和CSS规范。Bootstrap不单单是一个框架,更确切的说,它改变了整个游

JS模仿手机端九宫格登录功能实现代码 最近没有项目做,闲来无事写了一个小demo,特此分享到积木网平台,供大家参考下,本文写的不好还请各位大侠见谅!功能及方法逻辑都注释在代码中

标签: document.location.hash

本文链接地址:https://www.jiuchutong.com/biancheng/369897.html 转载请保留说明!

上一篇:字符串反转_JavaScript(字符串反转C语言代码)

下一篇:JS实现的base64加密解密完整实例

  • 进项税额转出要交企业所得税吗
  • 公司车辆承包给个人违法吗
  • 子公司分红母公司缴税吗
  • 纳税表不得抵扣什么意思
  • 办公室购买水果做会计分录
  • 税控盘怎么注销需要带什么东西
  • 已上传的红字发票怎么打印
  • 当月减少的固定资产当月停止折旧
  • 同一控制下企业合并取得的长期股权投资
  • 财政科技经费专项拨款的会计处理
  • 医疗器械行业进销存软件
  • 委托加工产品月末结转成本
  • 拆迁补偿款使用范围
  • 注册资本需要
  • 企业发生的咨询费用
  • 咨询费 税
  • 采购合同安装服务费审价规定
  • 广告机计入什么费用
  • 茶具可以作为固定资产吗
  • 定金转为货款金额需要特别约定吗?
  • 认缴实收资本印花税什么时候交
  • 专用发票可以抵税是什么意思
  • 包装物押金收入含税吗
  • 核定征收没有收入要交税吗
  • koeids.dll
  • PHP:Memcached::appendByKey()的用法_Memcached类
  • 招待费的范畴
  • php获取指定日期是星期几
  • 如何区分货币财富和收入
  • 微信红包如何发出去
  • nvm安装教程
  • web自动化selenium实战项目
  • python导入其他文件的函数
  • 深度学习参数初始化(二)Kaiming初始化 含代码
  • 表单验证方法一般有哪几种
  • 大学生创新创业大赛官网
  • phpcms v9安装教程
  • 不发工资可以交五险一金吗
  • 增值税进项税额计算公式
  • 辞退福利记入什么费用
  • 合营企业和联营企业的概念
  • mysql触发器使用
  • 折旧费属于什么总账科目
  • 小额零星业务税收政策
  • 普通发票的税费计入应交税费吗
  • 保险补偿多久到账
  • 跨月的红字发票申请表怎么撤销
  • 车船税发票可以抵扣吗
  • 收到股东的投资款现金流量表
  • 存货盘亏需要进项转出吗
  • 待摊费用要怎么做账
  • 餐饮业燃气费计入什么科目
  • 劳保统筹费缴费比例
  • 未认证的发票不入账有什么影响
  • 非营利机构如何申请
  • 进项税额有抵扣期限吗
  • 发票过账是什么意思
  • mysql支持的数据类型主要有哪几类
  • win7系统如何一键还原
  • ie11安装方法
  • 苹果电脑mac设备怎么删除
  • xp开始菜单栏怎么还原
  • linux修改分组
  • 越狱免电脑
  • win8 自动登录
  • 安卓游戏引擎
  • unity3d从入门到精通
  • 设计模式工厂模式使用场景
  • node 创建文件夹
  • android内存使用情况
  • DeviceOne 让你一见钟情的App快速开发平台
  • shell脚本替换文件中某个字符串
  • python如何安装各种库
  • js 严格的迭代语句
  • 怎么打印纳税申报清单
  • 河北省国家税务局长简介
  • 城建税教育费附加怎么做分录
  • 取消税控盘服务费
  • 合肥报税网站
  • 贵州银行短信服务怎么开通
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设