位置: 编程技术 - 正文

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加密解密完整实例

  • 预收账款开票怎么做账
  • 支付企业所得税会计科目
  • 经营所得个税计算案例
  • 预计负债的会计核算
  • 企业筹建期间契税账务处理
  • 印花税购销合同计税依据70%
  • 人力资源交哪些税费
  • 盘盈资产开具发票是否符合规定
  • 销售研发试制样板图
  • 延期缴纳税款会退回吗
  • 房地产限购过程是什么
  • 柴油暂估入账
  • 免税货物开成含税率的怎么报税?
  • 行政单位年初预算怎么做
  • 奖励给优质供应商会计处理怎么做?
  • 已付款未收到发票怎么做分录
  • 营业外支出可以抵扣进项税吗
  • 餐饮定额发票可以用吗现在
  • 什么是所有者权益?其包括哪些内容
  • 发票上开的购物卡,入帐时怎么写摘要?
  • 增值税清卡失败f50006
  • 电费返还怎么查询
  • 合同负债和预收账款的关系
  • 腾讯云centos5.8
  • 不合格原材料
  • 苹果多屏协同win10
  • 红掌的养殖方法和注意事项
  • vue3 超好用的富文本编辑器
  • 商品流通企业会计科目表
  • 建兰的养殖方法和注意事项 盆栽
  • 福克兰群岛属于哪国
  • 堡垒山是哪个国家
  • 投资收益结转到哪个科目
  • php教程100
  • uniapp跳转页面没反应
  • php ajax 实现
  • 金融机构贷款准备金
  • discuz论坛无法登录
  • 二手车减免增值税的规定
  • php单例模式优点
  • 供应商退款需要冲库存商品吗
  • 本月进项税额可以下月抵扣吗
  • 有限公司也可以向股东核发股票
  • 税款已缴未入库怎么处理
  • 新办企业小规模纳税人多久可以申请发票增量
  • 存货跌价准备转回的条件有哪些
  • 工会经费计税依据是应发还是实发
  • 车间购买劳保费用会计分录
  • 营业税金及附加和税金及附加有什么区别
  • 股东撤资后需要承担责任
  • 发工资四舍五入多了几块钱怎么办
  • 新成立的公司怎样建账
  • 财政非税收入支付平台
  • 党组织专项经费包括什么
  • 外资企业取得合法地位
  • 小规模纳税人怎么申报个人所得税
  • 在建工程怎么记账
  • 关于sql的几道小知识
  • mysql绿色版配置
  • Mysql 5.7.9 shutdown 语法实例详解
  • vi编辑器使用教程
  • qtzgacer.exe - qtzgacer进程是什么文件 .作用是什么
  • windows8如何使用
  • cocos2dx菜鸟教程
  • Default style sheet for HTML 4
  • unity 3d书籍
  • jquery prevall
  • python中生成随机小数的函数
  • flash和javascript
  • json jquery
  • node.js的express
  • bootstrapped 5%
  • Python 正则表达式的高级用法
  • 前端开发的工作流程
  • 修改应用程序图标
  • 建筑企业异地预缴增值税计算
  • 个人所得税税单下载
  • 广西税务移动办税平台app
  • 房产税纳税义务时间
  • 海口市哪个地方最漂亮
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设