利用window.name属性，实现用户页面跳转或刷新后，数据依然保留

最新推荐文章于 2022-11-07 22:06:44 发布

iteye_3224

最新推荐文章于 2022-11-07 22:06:44 发布

阅读量1.3k

点赞数

文章标签： javascript ViewUI

很多朋友在做一些需要用户输入数据的页面时，都希望提交表单刷新后用户填写的信息依然存在，或者有时候从一个页面切换到另一个页面的时候需要获得上一个页面的数据，目前有几种办法能够保存页面跳转后依然保存填写的信息。

大致的流程可以是这样，监听window的unload事件，触发时，保存信息：

1、用cookie，页面unload时，保存信息到cookie。缺点：客户端可能禁用cookie，另一个就是安全性问题。

2、用session，页面unload时，信息存到服务端。缺点：增加服务端压力。

这里主要介绍第三种方法，就是用window.name属性保存信息，window.name在跨域的交互上起到了很大的作用，基本原理就是，window.name在载入新页面或刷新后，其值依然是上次页面设置的值，因此，我们可以利用这个不变形来保存用户输入的信息。以下举个例子演示：

<script type="text/javascript">  
window.onload = function(){
 if(window.name){
  	var userEl = document.getElementById('user'),
  	    ageEl  =  document.getElementById('age');
		
	var info = (new Function("return "  + window.name))();
    userEl.value = info.user;
	ageEl.value = info.age;   
 }
 
 document.getElementsByTagName('form')[0].onsubmit = function(){
    alert('提交成功，页面跳转');	 
 } 
}
   
window.onunload = function(){
  var user = document.getElementById('user').value,
  	   age  =  document.getElementById('age').value;
   
  window.name  = '{user:"' + user + '",age:' + '"' + age + '"}'; 
  
}
</script>   

<html>
<meta http-equiv="content-type" charset=" text/html; utf-8" />
<body>
<form action="">
<label for="user">用户名：</label><input type="text" value="" id="user" /><br />
<label for="age">年龄：</label><input type="text" value="" id="age" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>

上述代码演示了整个过程，可实现页面提交后保存用户信息。

不过我得承认，对于页面提交保存信息，完全可以有AJAX方法更好的实现，不过window.name的用处毕竟不只是局限在这里，这里只是一个演示。

另外，若只按F5这样刷新，在FF和IE8下，页面信息会保留，在chrome下，页面信息不会保留，所以window.name还可以在chrome下防止用户误刷新导致信息的清空。

window.name的用处其实还挺多，跨域我想是目前最大的用处了，还有实现单页面跳转提取信息等功能。

iteye_3224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用window.name属性，实现用户页面跳转或刷新后，数据依然保留

很多朋友在做一些需要用户输入数据的页面时，都希望提交表单刷新后用户填写的信息依然存在，或者有时候从一个页面切换到另一个页面的时候需要获得上一个页面的数据，目前有几种办法能够保存页面跳转后依然保存填写的信息。大致的流程可以是这样，监听window的unload事件，触发时，保存信息： 1、用cookie，页面unload时，保存信息到cookie。缺点：客户端...
复制链接

扫一扫