/*本例是为了在客户端页面返回时保存状态,采用hash值记录的模式,为了使用方便所写的存取hash值的库,时间仓促,望指出错误。*/
var pageStateHash = {
hashArray: [],
getHashArray: function() {
var _self = this;
if (window.location.hash.replace('#','') != '') {
_self.hashArray = window.location.hash.replace('#','').split('&');
}
},
applyHash: function() {
var _self = this;
window.location.hash = '#' + _self.hashArray.join('&');
},
hashIndex: function(key) {
var _self = this;
var ret = -1;
_self.getHashArray();
for (var i in _self.hashArray) {
var item = _self.hashArray[i].split('=');
var length = item.length;
if (length == 2 && item[0] == key) {
ret = i;
}
}
return ret;
},
set: function(key, value) {
var _self = this;
var hashIndex = _self.hashIndex(key);
console.log('hash index = '+hashIndex);
if (hashIndex == -1) {
_self.hashArray.push(key + '=' + value);
} else {
_self.hashArray[hashIndex] = key + '=' + value;
} _self.applyHash();
},
get: function(key) {
var _self = this;
var hashIndex = _self.hashIndex(key);
if (hashIndex == -1) {
return '';
} else if (_self.hashArray[hashIndex].split('=').length == 2) {
return _self.hashArray[hashIndex].split('=')[1];
}
}
};
/*pageStateHash.set('cate1', '8');
pageStateHash.set('cate2', '9');
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. JMS基本概念

    原文:http://blog.csdn.net/jiuqiyuliang/article/details/46701559 The Java Message Service (JMS) API is ...

  2. Android 怎样把光标放在EditText中文本的末尾处?

    EditText et = (EditText)findViewById(R.id.inbox); et.setSelection(et.getText().length());

  3. CentOS Mysql自动备份 .txt

    http://fly.b3log.org/articles/2011/10/25/1319505473928.html MySql数据库备份: 说明:我这里要把MySql数据库存放目录/var/lib ...

  4. 16.allegro元件手动摆放[原创]

    一.手动摆放 --- -- 一个个摆放 二.全局设置 --- 这里都是全局的 显示信息 三.快速摆放所有元件 -- ---- 四.显示的内容很多,我们来设置下显示 -- 1 --- 2 --- 3 - ...

  5. [转]SQL语句优化技术分析

    一.操作符优化 1.IN 操作符 用IN写出来的SQL的优点是比较容易写及清晰易懂,这比较适合现代软件开发的风格.但是用IN的SQL性能总是比较低的,从Oracle执行的步骤来分析用IN的SQL与不用 ...

  6. BZOJ 1878 HH的项链(树状数组)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1878 题意:给出一个数列,每次询问区间[L,R]中有多少个不同的数字? 思路: (1)记 ...

  7. leetcode:Rectangle Area

    Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defined b ...

  8. 【转】Android 使用ORMLite 操作数据库

    Android 使用ORMLite 操作数据库   用过ssh,s2sh的肯定不会陌生 ,应该一学就会 第一步: 下载ormlite-android-4.41.jar和ormlite-core-4.4 ...

  9. string中常用的函数

    string中常用的函数 发现在string在处理这符串是很好用,就找了一篇文章放在这里了.. 用 string来代替char * 数组,使用sort排序算法来排序,用unique 函数来去重1.De ...

  10. 无锁编程(五) - RCU(Read-Copy-Update)

    RCU(Read-Copy Update) RCU就是指读-拷贝修改,它是基于其原理命名的.对于被RCU保护的共享数据结构,读操作不需要获得任何锁就可以访问,但写操作在访问它时首先拷贝一个副本,然后对 ...