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>