在網頁前端HTML開發中，會碰到網頁上獲取數據與傳值的問題，正確恰當使用網頁上的數據與傳值，可開發出更多的功能與頁面效果，讓網頁瀏覽起來更人性化。備注：下面代碼是運行在javascript中的。

1、get方式，獲取url攜帶的參數
var link = location.href; //如當前鏈接是：http://www.nanbaike.com/html/about/about-110.html?aid=129
var result = link.split( "aid=" );//通過aid=把網址分割成2部分
var aid = result[ 1 ];//獲取網址aid=后半部分
argu = aid;//這里就能獲取到地址欄中aid的參數值 129

2.通過cookie傳值，cookie能夠把少量數據存儲到客戶端的磁盤中，大約4KB內
//設置 cookie
  function setcookie(cname, value, cexpires){
  let data=new Date()
  let datatime=data.getTime()//獲取當前時間
  data.setTime(datatime+cexpires*1000*60*60*24)//設置過期時間，單位為天
  let expires="expires="+data.toUTCString()//拼接世界時間的過期時間，北京時間為當前時間加八小時即可
  document.cookie=`${cname}=${value};${expires}`//設置cookie數據和過期時間，中間用分號分隔
 }
 setcookie("ABBBBBBBC_data","wQksls20sj23",2);//函數傳參
 console.log("cookie:",document.cookie);//這種方式會查找所有cookie的數據，以字符串形式返回

//獲取指定名稱的cookie的值
function getcookie(ABBBBBBBC_data){
var arrstr = document.cookie.split("; ");
for(var i = 0;i < arrstr.length;i ++){
var temp = arrstr[i].split("=");
if(temp[0] == ABBBBBBBC_data) return unescape(temp[1]);
}};
console.log("返回window.getcookie:",getcookie("ABBBBBBBC_data"));

3.通過 h5技術，window.localStorage存儲數據
< a class="nav_sub01" data-aid="001">文字< /a> 

aid = $(this).data("aid");//事件傳遞參數
// 01.h5技術-window.localStorage存儲數據 
if(window.localStorage){
localStorage.value=aid;
}else{
alert("瀏覽器不支持H5 Storage!")
}
// 02.h5技術-提取window.localStorage存儲數據，進行操作
var va = localStorage.value;
//把 va 使用其他code上


總結：對于不同的解決方法，都有優缺點

1、url攜帶參數傳值
優點：取值方便，可以跨域，利于頁面分享，沒有環境限制。
缺點：url攜帶參數值的長度有限制。
01、IE瀏覽器對URL的最大限制為2083（2k）個字符
02、Firefox瀏覽器URL的長度限制為65,536（64k）個字符
03、Safari 瀏覽器URL最大長度限制為 80,000個字符
04、Opera 瀏覽器URL最大長度限制為190,000個字符
05、Google瀏覽器 URL長度一旦超過8182個字符時
06、Apache 服務器能接受最大url長度為8,192個字符
07、Microsoft Internet Information Server(IIS)服務器能接受最大url的長度為16,384個字符

2、cookie方式存儲
優點：可以在同源內的的任意網頁中訪問，存儲數據的周期可以自由設置。
缺點：有長度限制，大約4KB內。

3、h5技術，window.localStorage存儲數據
優點：儲存空間大，在客戶端有5M存儲空間。
缺點：不是所有瀏覽器都支持。

建議：不重要的數據可以通過url攜帶傳值；重要的用戶信息如賬戶和密碼可使用cookie存儲傳值；比較大的數據可以通過H5技術本地存儲后獲取使用。

上一篇：js對表單提交數據進行驗證并對廣告數據進行過濾

下一篇：iframe標簽介紹與用法