前端實現跨頁面傳值的幾種方式
阿新 • • 發佈:2019-02-10
一:利用url引數傳遞
//1:A頁面設定url引數
$('#go_url').on('touchend',function () { var sss = "中國"; window.location.href = encodeURI("demo2.html?name=" + sss + "&age=5000"); });
//2:B頁面獲取url引數
var url = window.location.search; var urlResult = []; var arrUrl = url.substr(1).split("&"); for (var j = 0; j < arrUrl(注:上面用了encodeURI編碼,decodeURI解碼來解決中文亂碼的問題).length; j++) { urlResult[j] = decodeURI(arrUrl[j].split("=")[1]); } $('.name').text('名稱:' + urlResult[0]); $('.age').text('數量:' + urlResult[1]);
二:利用快取傳遞
//1:A頁面設定引數到快取
$('button').on('touchend',function () { var username = $('#username').val(); var userage= $('#userage').val(); var arrLocalStorage = [username, userage]; //儲存,IE6~7 cookie 其他瀏覽器HTML5本地儲存 if (window.localStorage) { localStorage.setItem("localName", arrLocalStorage); } else { Cookie.write("localName", arrLocalStorage); } });
//2:B頁面獲取快取值
var StoreDate = window.localStorage ?localStorage.getItem("localName") : Cookie.read("localName"); var arrStoreDate = StoreDate.split(","); for (var i = 0; i < arrStoreDate.length; i++) { var liHtml = "<li>" + arrStoreDate[i] + "</li>"; $('.list').append(liHtml); }