1. /*本例是为了在客户端页面返回时保存状态,采用hash值记录的模式,为了使用方便所写的存取hash值的库,时间仓促,望指出错误。*/
    var pageStateHash = {
  2. hashArray: [],
  3. getHashArray: function() {
  4. var _self = this;
  5. if (window.location.hash.replace('#','') != '') {
  6. _self.hashArray = window.location.hash.replace('#','').split('&');
  7. }
  8. },
  9. applyHash: function() {
  10. var _self = this;
  11. window.location.hash = '#' + _self.hashArray.join('&');
  12. },
  13. hashIndex: function(key) {
  14. var _self = this;
  15. var ret = -1;
  16. _self.getHashArray();
  17. for (var i in _self.hashArray) {
  18. var item = _self.hashArray[i].split('=');
  19. var length = item.length;
  20. if (length == 2 && item[0] == key) {
  21. ret = i;
  22. }
  23. }
  24. return ret;
  25. },
  26. set: function(key, value) {
  27. var _self = this;
  28. var hashIndex = _self.hashIndex(key);
  29. console.log('hash index = '+hashIndex);
  30. if (hashIndex == -1) {
  31. _self.hashArray.push(key + '=' + value);
  32. } else {
  33. _self.hashArray[hashIndex] = key + '=' + value;
  34. }
  35.  
  36. _self.applyHash();
  37. },
  38. get: function(key) {
  39. var _self = this;
  40. var hashIndex = _self.hashIndex(key);
  41. if (hashIndex == -1) {
  42. return '';
  43. } else if (_self.hashArray[hashIndex].split('=').length == 2) {
  44. return _self.hashArray[hashIndex].split('=')[1];
  45. }
  46. }
  47. };
  48. /*pageStateHash.set('cate1', '8');
  49. pageStateHash.set('cate2', '9');
  50. console.log('get cate2 index:' +pageStateHash.get('cate2'));*/

location.hash来保持页面状态的更多相关文章

  1. 巧用location.hash保存页面状态

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

  2. 使用location.hash保存页面状态

    hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分). 语法 location.hash 在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是a ...

  3. 学习笔记:location.hash和history.pushState()

    在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越来越多的网站采用ajax来加载资源.因为异步加载的特性,地址栏 ...

  4. 前端 JS 原生 javascript 和 location.hash 实现一个单页应用的路由 router

    开篇日常立个flag-- 前言 最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项 ...

  5. 简单使用location.hash的方法 ,怎么做,有什么用? 简单的js路由页面方法。

    hash 属性是一个可读可写的字符串,该字符串是URL的锚部分(从#号开始的部分).语法location.hash刚开始我真不知道hash有什么用,直到我在项目中遇上一个最大的问题.而且很恶心的体验 ...

  6. window.location.hash 页面跳转,精确定位,实例展示:

    window.location.hash 页面跳转,精确定位,实例展示: (1).index.phtml,页面用于传参 <script id="bb_list_template&quo ...

  7. window.location.hash(hash应用)---跳转到hash值制定的具体页面

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  8. js 利用iframe和location.hash跨域解决的方法,java图片上传回调JS函数跨域

    奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...

  9. window.location.hash 使用说明

    本文给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下.   location是javascript里边管理地址 ...

随机推荐

  1. CreateProcess启动隐藏的外部程序(其实就是CreateDesktop,然后指定STARTUPINFO.lpDesktop)

    HDESK hDesk = CreateDesktop(_T("MyDesk"), NULL, NULL, 0, GENERIC_ALL, NULL); ASSERT(hDesk) ...

  2. QTableView带可编辑进度条

    main文件与上一个例子完全一致,也使用QStandardItemModel,关键是有这句:QStandardItem.setEditable(false);  继承QAbstractItemDele ...

  3. 272. Closest Binary Search Tree Value II

    题目: Given a non-empty binary search tree and a target value, find k values in the BST that are close ...

  4. swift:入门知识之控制流

    1.swift语句中的控制流和其他语言大致相同,使用if和switch作为条件控制.使用 for-in.for.while.do-while作为循环. 2.区别之处:小括号不是必须的,但是主体的大括号 ...

  5. HDU 4662 MU Puzzle 简单找规律

    没有任何变换(III变U和删UU操作)之前,I 的个数一定是2^x个(也就是2的整数次幂) 若仅考虑III变U,那么设U的个数为k,I 的个数变为2^x-3*k 再加上删除UU操作,假设我们删除了2* ...

  6. python列表推导式详解

    推导式是Python中很强大的.很受欢迎的特性,具有语言简洁,简化代码,速度快等优点.推导式包括:1.列表推导式2.字典推导式3.集合推导式4.嵌套列表推导式注意: 字典和集合推导是最近才加入到Pyt ...

  7. [ionic开源项目教程] - 第9讲 新闻详情页的实现

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  8. MVC 中使用扩展方法

     扩展方法(Extension Method)是给那些不是你拥有.因而不能直接修改的类添加方法的一种方便的办法. 一.使用扩展方法 1.定义一个购物车的类-ShoppingCart using Sys ...

  9. 51nod1257 背包问题 V3

    分数规划经典.开始精度1e-3/1e-4都不行,1e-5就A了 #include<cstdio> #include<cstring> #include<cctype> ...

  10. HDU 2544 最短路【Bellman_Ford 】

    题意:给出n个节点,m条边,问从起点到终点的最短距离 用bellman_ford,注意是无向图 初学bellman_ford= =一点点理解 因为dijkstra是每次用集合里面的点去更新它们所连接的 ...