js實現頁面與頁面之間傳值的幾種方法優劣

1. cookie 傳值, 缺點: cookie儲存是需要服務器支持的，本地直接運行靜態文件是實現不了的

<script>
    
    
//添加 cookie
function cp_add_cookie(num){
setCookie("cp_keynum",num,2);
}
//查找
function cp_seek_cookie(){
var cp_keynum=getCookie("cp_keynum");
var find_result = document.getElementById("find_result2");
find_result.innerHTML = "cp_keynum == " + cp_keynum;  
}
 
 
//設置 cookie 值的函數,創建一個函數用於存儲訪問者的名字
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
//獲取 cookie 值的函數,創建一個函數用戶返回指定 cookie 的值
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
}
 
</script>

 

2. LocalStorage和SessionStorage傳值, 優點:本地靜態文件可支持

if(typeof(Storage)=="undefined")
{
  document.getElementById("result").innerHTML="對不起，您的瀏覽器不支持 web 存儲。";
}
//保存數據  
function save(cp_value){  
    var num = new Object;
    num.cp_keynum ="key_num";  
    num.cp_num_value = cp_value;
    var str = JSON.stringify(num); // 將對象轉換為字符串
    localStorage.setItem(num.cp_keynum,str);
    alert("添加成功");
}
 //查找數據  
function find(){  
    var cp_keynum = "key_num";  
    var str = localStorage.getItem(cp_keynum);  
    var find_result = document.getElementById("find_result");
    var num = JSON.parse(str);  
    find_result.innerHTML = cp_keynum + "==" + num.cp_num_value;  
}  

 

3. Url傳值. 優點: 速度快. cookie 和 LocalStorage和SessionStorage 都存在速度慢,反應不過來的問題, 我在a頁面寫進去,在b頁面讀出來.有時會讀到空值.

    function getUrlParam(name){
        //正則表達式過濾
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
       
        console.log("location.search==="+location.search);
        //substr（1）：從字符串第一個位置中提取一些字符
        console.log("location.search.substr(1)==="+location.search.substr(1));
        //match（）：在字符串內檢索與正則表達式匹配的指定值，返回一個數組給r
        console.log("window.location.search.substr(1).match(reg)==="+window.location.search.substr(1).match(reg));
        var r = window.location.search.substr(1).match(reg); 
        //獲取r數組中下標為2的值；（下標從0開始），用decodeURI（）進行解碼
        console.log("decodeURI(r[2])==="+decodeURI(r[2]));
       if (r != null) return decodeURI(r[2]); return null; 

}