html静态页面传值的几种方法

时间 2019-12-14

标签 html 静态页面几种方法栏目 HTML 繁體版

原文原文链接

因为在项目中时常要跨静态页面传值，因此在这里整理一下。html

固然有一种方式是在页面跳转前，先发个请求到后台将值存储到session中，跳转后再发个请求到后台取出。这种方式不单单慢并且还特别耗费资源。浏览器

如下有其余的几种方式：cookie

方式1：使用拼接地址的方法。就是在跳转地址后面拼接参数。以下：session

post1.htmlpost

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>静态网页传值(post)1</title>
<script>
    
    
    
    function click1(){
        var name = escape(document.getElementById("name").value);    //escape方法是改变编码
        
        var pwd = escape(document.getElementById("pwd").value);    
        
        var url = "get1.html?"  + "name=" + name + "&pwd=" + pwd ; //进行拼接传值

        location.href=url;
    }
</script>
</head>
<body>
    名字：<input type="text" id="name"/>
    密码：<input type="text" id="pwd"/>
    <input type="button"  onclick="click1()" value="提交："/>
</body>
</html>

get1.html编码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>静态网页传值(get)1</title>
<script>
    function click1(){
        var url = location.search; //这一条语句获取了包括问号开始到参数的最后，不包括前面的路径
        var params = url.substr(1);//去掉问号
        var pa = params.split("&");
        var s = new Object();
        for(var i = 0; i < pa.length; i ++){
            s[pa[i].split("=")[0]] = unescape(pa[i].split("=")[1]);
        }
        document.getElementById("name").value =s.name;
        document.getElementById("pwd").value = s.pwd;
    }
    /*
        这种传值的方式很方便，并且简单有效，可是缺点是受到url长度的限制，因为每一个浏览器对url长度的限制不一样，这里很差给出一个肯定的限制，
        只知道这个传值传的数据量不能太大。
    */
</script>

</head>

<body>
    
    名字：<input type="text" id="name"/>
    密码：<input type="text" id="pwd"/> 
    <input type="button"  onclick="click1()" value="获取："/>
    
</body>
</html>

这种方法简单有效，可是数据量有限制url

方式2：使用本地存储的cookiespa

post2.htmlcode

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>post2</title>
<script>

    function click1(){
        var name = document.getElementById("name").value;    
        
        var pwd = document.getElementById("pwd").value;        
        document.cookie = "name:" + name + "&pwd:" + pwd;
        location.href="get2.html";
    }
    
    /*
        关于cookie，要特别处理传过来的字符串，其次，还有些浏览器不支持cookie的，但目前来讲，通常浏览器都支持cookie
    */
</script>

</head>

<body>
    名字：<input type="text" id="name"/>
    密码：<input type="text" id="pwd"/>
    <input type="button"  onclick="click1()" value="提交："/>
</body>
</html>

get2.htmlhtm

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>get2</title>
<script>
    function click1(){
        var params= document.cookie;  
        var pa = params.split("&");
        var s = new Object();
        for(var i = 0; i < pa.length; i ++){
            s[pa[i].split(":")[0]] = pa[i].split(":")[1];
        }
        
        document.getElementById("name").value =s.name;
        document.getElementById("pwd").value = s.pwd;

    }
    
</script>
</head>
<body>
    
    名字：<input type="text" id="name"/>
    密码：<input type="text" id="pwd"/> 
    <input type="button"  onclick="click1()" value="获取："/>
   
</body>
</html>

关于cookie就是要注意有些浏览器是不支持的，同时还须要注意cookie的时效的问题，cookie是能够设置失效时间的。关于cookie的解析也要注意一下

方法3：localStorage

post3.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>post3</title>

<script>
    function click1(){
        var name = document.getElementById("name").value;    
        
        var pwd = document.getElementById("pwd").value;    

        localStorage.setItem("name",name);
        localStorage.setItem("pwd",pwd);
        
        location.href="get3.html";
    }

</script>


</head>

<body>
    名字：<input type="text" id="name"/>
    密码：<input type="text" id="pwd"/>
    <input type="button"  onclick="click1()" value="提交："/>
</body>
</html>

get3.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>get3</title>
<script>
    function click1(){
        document.getElementById("name").value = localStorage.getItem("name");
        document.getElementById("pwd").value = localStorage.getItem("pwd");

    }
    /*
        方便简单， 可是要考虑浏览器的版本支持
    */
</script>
</head>
<body>
     名字：<input type="text" id="name"/>
    密码：<input type="text" id="pwd"/> 
    <input type="button"  onclick="click1()" value="获取："/>
</body>
</html>

这种方法简单有效，同时还不须要字符串解析。很是的有意思。可是要注意浏览器的版本支持，因此在使用前请判断是否支持。

分享结束，欢迎评论