JavaScript让HTML静态页面传值的方法

刚有个好友问我HTML页面之间如何传递数据，这确实是比较棘手的问题，如果是动态页面，根本就不需要考虑这个问题，可以如果是一个纯HTML+JavaScript的应用，那么就无法使用数据库等操作，没有保存数据，当然我们可能想到了HTML5的离线数据储存，那样也可以实现数据的交换，现在我就给大家分享几个可以实现在HTML静态网页之间传值的方法。

假设我们有两个网页分别为index.html和single.html，index.html里面有一个表单，表单里面有两个字段，分别为name和value，如下：

当点击提交的时候，我想让name和value的值提交到single中去，那么我们应该如何编写代码呢，这里我提供给大家几个方法，你可以选择你觉得和合适的方法去编写这个应用。

JavaScript通过URL传值

这个方法没有什么技术含量，也是最简单的，不过有个缺点就是传输的值不能太大，因为浏览器对与URL的长度是有限制的。

将form的action属性设置为GET，那么表单里面的字段就会自动通过url传输过去，然后在single.html页面获取url，分割参数就可以得到数据。

var url=location.search;
var Request = new Object();
if(url.indexOf("?")!=-1){
    var str = url.substr(1)　//去掉?号
    strs = str.split("&");
    for(var i=0;i 
  
 这个方法可以跨域传输，但是长度有限制。
 
  
 JavaScript通过Cookie传值
 
  
 Cookie是浏览器存储少量命名数据，它与某个特定的网页或网站关联在一起，Cookie用来给浏览器提供内存，以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据。
 
  
 这里我们自定义一个通用的设置Cookie 的函数，引入jquery框架，然后就使用jquery提供的一些方法，方便快速的编程。
 
  
$('from').submit(function(){
    addCookie('name', $('input["name"="name"]').val());
    addCookie('name', $('input["name"="value"]').val());
})
//设置Cookie
function addCookie(name,value,expireHours){
    var cookieString=name+"="+escape(value);
    //判断是否设置过期时间
    if(expireHours>0){
        var date=new Date();
        date.setTime(date.getTime+expireHours*3600*1000);
        cookieString=cookieString+"; expire="+date.toGMTString();
    }
    document.cookie=cookieString;
}
 
  
 然后在single.html页面获取Cookie，这里我们也定义一个通用的获取Cookie的函数。
 
  
//获取Cookie
function getCookie(name){
    var strCookie=document.cookie;
    var arrCookie=strCookie.split("; ");
    for(var i=0;i 
  
 可以在同源内的任意网页内访问，生命期可以设置，不过同样的传输的值有限制。
 
  
 JavaScript通过Window.open传值
 
  
 这两窗口之间存在着关系，父窗口index.html打开子窗口single.html子窗口可以通过window.opener指向父窗口，这样可以访问父窗口的对象，在single.html页面编写下面的代码：
 
  
 
  
 这个方法取值方便，只要window.opener指向父窗口，就可以访问所有对象。不仅可以访问值，还可以访问父窗口的方法，值长度无限制，缺点是两窗口要存在着关系，就是利用window.open打开的窗口不能跨域。
 
  
 JavaScript通过HTML5本地储存传值
 
  
 HTML5中新加入了离线储存，那么我们就可以使用离线数据库保存我们的数据，然后在需要的地方调用数据，这就和在先应用没有却别了，这也可能是最好的解决方法。
 
  
 由于是一个新的技术，你可以通过下面的代码检测你的浏览器是否支持
 
  
if(window.localStorage){
    alert('This browser supports localStorage');
}else{
    alert('This browser does NOT support localStorage');
}
 
  
 储存变量的值
 
  
localStorage.name = $('input["name"="name"]').val();
 
  
 读取变量的值
 
  
var myname = localStorage["name"];
 
  
 以上就是今天带给大家的JavaScript让HTML静态页面传值的方法，你可以选择一种方法来实现你项目的功能，如果你还有其他的方法欢迎留言讨论。
 
  

    本文系作者  问说网 授权问说网发表，并经问说网编辑，转载请注明出处和  本文链接。 
  
 
  

    本站文章除注明转载外，均为本站原创或翻译，欢迎任何形式的转载，但请务必注明出处，尊重他人劳动。 
   
 转载请注明：文章转载自： 问说网 »  JavaScript让HTML静态页面传值的方法 
   
 本文标题：JavaScript让HTML静态页面传值的方法 
   
 本文地址： http://www.uedsc.com/javascript-html-get-value.html