1. 程式人生 > >前端實現跨頁面傳值的幾種方式

前端實現跨頁面傳值的幾種方式

一:利用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
.length; j++) { urlResult[j] = decodeURI(arrUrl[j].split("=")[1]); } $('.name').text('名稱:' + urlResult[0]); $('.age').text('數量:' + urlResult[1]);
(注:上面用了encodeURI編碼,decodeURI解碼來解決中文亂碼的問題

二:利用快取傳遞

//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); }