通常,我们都会使用比较熟悉的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. 11g添加asm

    1.创建组 2.创建grid用户 3.用grid安装Gride Infrastructure软件 4.执行root.sh[root@ora11g softdb]# /u01/app/11.2.0/gr ...

  2. [Unity3d插件]EasyTouch的初步使用

    对于移动平台上的RPG类的游戏,我们常用虚拟摇杆来控制人物角色的行走和一些行为,相信我们对它并不陌生,之前尝试了EasyTouch2.5,发现并没有最新版的3.1好用,2.5版本的对于自适应没有做的很 ...

  3. 注解:【基于外键的】Hibernate单向1->1关联

    Person与Address关联:单向1->1,[基于外键的] Person.java package org.crazyit.app.domain; import javax.persiste ...

  4. hihocoder #1333 : 平衡树·Splay2

    描述 小Ho:好麻烦啊~~~~~ 小Hi:小Ho你在干嘛呢? 小Ho:我在干活啊!前几天老师让我帮忙管理一下团队的人员,但是感觉好难啊. 小Hi:说来听听? 小Ho:事情是这样的.我们有一个运动同好会 ...

  5. Linux学习笔记(8)Linux常用命令之网络命令

    (1)write write命令用于给指定用户发信息,以Ctrl+D保存结束,所在路径为/usr/bin/write,其语法格式为: write [用户名] 注:只能给在线用户发送. 例:新建ws用户 ...

  6. 搭建ASP JSP运行环境

    搭建JSP 服务器 Java + HTML 的运行环境 服务端搭建ASP.NET运行环境

  7. javascript优化--14模式2(DOM和浏览器模式)

    远程脚本 XMLHttpRequest JSONP 和XHR不同,它不受同域的限制: JSONP请求的可以是任意的文档: 请求的URL通常格式为http://example.js?calback=Ca ...

  8. Spring MVC Test -Controller

    http://www.petrikainulainen.net/programming/spring-framework/unit-testing-of-spring-mvc-controllers- ...

  9. 思维题(转换) HDU 4370 0 or 1

    题目传送门 题意:题目巨晦涩的传递出1点和n点的初度等于入度等于1, 其余点出度和入度相等 分析:求最小和可以转换成求最短路,这样符合条件,但是还有一种情况.1点形成一个环,n点也形成一个环,这样也是 ...

  10. 【原】iOS多线程之NSThread、NSOperationQueue、NSObject和GCD的区别

    区别: Thread: 是这几种方式里面相对轻量级的,但也是使用起来最负责的,你需要自己管理thread的生命周期,线程之间的同步.线程共享同一应用程序的部分内存空间, 它们拥有对数据相同的访问权限. ...