在寫專案的時候遇到這樣一個問題，一個類似電商的，根據類別、品牌、年份等查商品，點選查詢按鈕通過ajax查詢出的。查出來之後點選圖片跳轉到商品詳情頁，這時候再返回到商品查詢頁時，之前ajax讀出來的資料會丟失(丟失的主要是通過事件查出來的資料)，頁面會回到剛進入這個頁面時的狀態。

解決方案：

1、如果是pc端，直接用window.open(),或者aget="_blank"開啟新頁面。

2、如果是移動端，可以用HTML5本地儲存（web Storage）中的localStorage和sessionStorage將整個頁面的資料儲存在客戶端本地。

localStorage：  localStorage的生命週期是永久性的。假若使用localStorage儲存資料，即使關閉瀏覽器，也不會讓資料消失，除非主動的去刪除資料。

sessionStorage：sessionStorage 的生命週期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其資料一直都是存在的。

localStorage和sessionStorage的主要方法：

        setItem (key, value) ——  儲存資料，以鍵值對的方式儲存資訊。

        getItem (key) ——  獲取資料，將鍵值傳入，即可獲取到對應的value值。

        removeItem (key) ——  刪除單個數據，根據鍵值移除對應的資訊。

        clear () ——  刪除所有的資料

        key (index) —— 獲取某個索引的key

該專案遇到的問題使用sessionStorage解決。以下為具體程式碼。

//點選跳轉
function goDesc(){
    //跳轉之前將區域性頁面儲存到sessionStorage物件中。
	window.sessionStorage.setItem("myhtml",$("#shop_list").html());
	window.location.href="http://www.baidu.com";
}

//頁面重新整理
window.onload=function(){
    //讀取sessionStorage物件中的內容
	var myhtml= window.sessionStorage.getItem("myhtml");
    //不為空表示是返回上一步進入該頁面的。
	if(myhtml!=null){
        //將sessionStorage物件中儲存的頁面新增到頁面中
		$("#shop_list").html(myhtml);
        //清空sessionStorage物件的內容。
		window.sessionStorage.clear();
	}
}
 

注意：只要瀏覽器不關閉，sessionStorage中的內容是不會清空的，所以在新增完內容要手動清空內容。