通常,我们都会使用比较熟悉的javascript:history.go(-1)来实现返回上一页,此种方法有一个问题就是返回上一页后不能刷新当前页面,给我们的开发带来了一定的不便,显然有时这种方法就不是我们需要的。那么有什么办法能获取到上一页的url去刷新上一页的页面呢?有人说可以用document.referrer来获取,这个也是可以的,其定义和用法如下:

referrer属性可返回载入当前文档的文档的URL。

实例:

点击进入下一页 a.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击进入下一页</title>
</head>
<body>
<a href="b.html">点击进入下一页</a>
</body>
</html>

返回上一页 b.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="" id="back">返回上一页</a>
<script>
document.getElementById("back").href = document.referrer;
</script>
</body>
</html>

说明:

经过测试,需要将两个文件放在服务器中才能得到想要的结果,若直接在本地文件夹中则得到空字符串,若直接在浏览器地址栏中输入b.html的URL地址或使用打开菜单访问b.html,则document.referrer的值为空字符串。

不过,html5有一个sessionStorage也可以实现这个效果。那么,什么是sessionStorage呢?本文就着重来阐述这个功能。

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。

但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等。

localStorage和sessionStorage的方法

setItem存储value

用途:将value存储到key字段

用法:.setItem( key, value)

代码示例:

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem获取value

用途:获取指定key本地存储的值

用法:.getItem(key)

代码示例:

var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");

removeItem删除key

用途:删除指定key本地存储的值

用法:.removeItem(key)

代码示例:

sessionStorage.removeItem("key");
localStorage.removeItem("site");

clear清除所有的key/value

用途:清除所有的key/value

用法:.clear()

代码示例:

sessionStorage.clear();
localStorage.clear();

html5 web storage的浏览器支持情况

浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

要判断浏览器是否支持localStorage可以使用下面的代码:

if(window.localStorage){
alert("浏览支持localStorage")
}else{
alert("浏览暂不支持localStorage")
}
//或者
if(typeof window.localStorage == 'undefined'){
alert("浏览暂不支持localStorage")
}

其他操作方法:点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}

storage事件

storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个storage事件改变的监听:

if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
}

storage事件对象的具体属性如下表:

Property Type Description
key String The named key that was added, removed, or moddified
oldValue Any The previous value(now overwritten), or null if a new item was added
newValue Any The new value, or null if an item was added
url/uri String The page that called the method that triggered this change

具体到实际的页面中,代码如下:

点击进入下一页 index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击进入下一页</title>
</head>
<body>
<a href="next.html">点击进入下一页</a>
<script>
var ss = sessionStorage,
url = window.location;
ss.setItem('back',url);
</script>
</body>
</html>

返回上一页 next.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>返回上一页</title>
</head>
<body>
<a href="" id="back">点击返回上一页</a>
<script>
var ss = sessionStorage,
url = ss.getItem('back');
document.getElementById("back").href = url;
</script>
</body>
</html>

本文转自:http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html

js通过sessionStorage实现的返回上一页的更多相关文章

  1. js中的referrer使用,返回上一页

    js完整代码: <script language="javascript"> var refer=document. referrer ;     document.g ...

  2. JS 重载页面,本地刷新,返回上一页

    JS 重载页面,本地刷新,返回上一页 : <a href="javascript:history.go(-1)">返回上一页</a> <a href= ...

  3. js中的referrer返回上一页使用介绍

    js中的referrer的用法举例. js完整代码:  <script language="javascript">  var refer=document.refer ...

  4. JS 返回上一页并刷新,但不用重新加载整个页面(ajax实现)

    需求 有三个页面A.B.C,点击A=>B,点击B=>C,在C中添加内容,点击确定返回到B,此时B页面需重新加载新的内容.再次点击B的返回按钮,希望返回到A而不是C. ===== 2017/ ...

  5. js返回上一页并刷新的多种实现方法

    <a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:loca ...

  6. JS跳出框架返回上一页

    链接部分 <a class="link" href="javascript:;" target="_top" onclick=&quo ...

  7. js 返回上一页

    --------2016-6-14 16:37:30-- source:[1]js返回上一页

  8. js 返回上一页和刷新

    1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forw ...

  9. js 实现返回上一页和刷新等页面跳转功能

    原文 出处http://www.2cto.com/kf/201111/109821.html 1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go ...

随机推荐

  1. jquery mobile 转场闪屏的解决

     jqm转场闪屏是用phonegap生成apk非常容易遇到的问题,暂时貌似还是没有完美的解决方案,网上暂时有一些方案,个人都尝试了一下发现还是改背景比较有效,总结如下: 改变默认css文件: .ui- ...

  2. 跟着鸟哥学Linux系列笔记3-第11章BASH学习

    跟着鸟哥学Linux系列笔记0-扫盲之概念 跟着鸟哥学Linux系列笔记0-如何解决问题 跟着鸟哥学Linux系列笔记1 跟着鸟哥学Linux系列笔记2-第10章VIM学习 认识与学习bash 1. ...

  3. 单链表带头结点&不带头结点

    转自:http://blog.csdn.net/xlf13872135090/article/details/8857632 Node *head;  //声明头结点   带头结点初始化 void I ...

  4. Servlet中的GET和POST之间的区别

    自己的感悟: get和post这是http协议的两种方法,另外还有head, delete等 这两种方法有本质的区别,get只有一个流,参数附加在url后,大小个数有严格限制且只能是字符串.post的 ...

  5. Ubuntu 安装OpenCV3.0.0

    Ubuntu安装OpenCV3.0.0 为了看看opencv3.0的HDR效果,尝试安装opencv3.0到ubuntu12.04上面,安装了好几次终于成功了. 参考博客: http://www.sa ...

  6. Java学习笔记(七)——对象

    一.类与对象 1.类的定义 类就是模型,确定对象将会拥有的特征(属性)和行为(方法). 2.类的特点 (1)类是对象的类型 (2)具有相同属性和方法的一组对象的集合. 3.对象的属性: 对象具有的各种 ...

  7. Android studio导入eclipse项目且不改变目录结构

    Android studio的安装与配置论坛当中已经有很多在此就不在细说了,现在开始说下如何在Android studio当中导入eclipse的项目且不改变其目录结构和配置,让使用eclipse的同 ...

  8. 性能测试中TPS和并发用户数

    并发用户数与TPS之间的关系 1.  背景 在做性能测试的时候,很多人都用并发用户数来衡量系统的性能,觉得系统能支撑的并发用户数越多,系统的性能就越好:对TPS不是非常理解,也根本不知道它们之间的关系 ...

  9. hdu 1370 Biorthythms 中国剩余定理

    Biorhythms Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  10. Liferay 6.2 改造系列之二十一:修改WebSphare下JSONWS服务不生效的BUG

    问题原因是WebSphare下,servletContext.getContextPath()获取到的值为“/”而非空字符串. 在/portal-master/portal-impl/src/com/ ...