以商品列表頁打比方，
眾所周知， 點擊商品進入詳情頁要保證不損壞當前清單頁狀態的做法通常是在a標籤上加上target=_blank進行新開一個視窗打開詳情頁
這個做法是非常普遍的， 包括很多很多牛叉的網站都是這麼玩的。
所以不管是什麼target=_blank啊還是什麼history.go(-1)啊 統統都會強制刷新重新渲染頁面
因為我是幹PHP的， 所以面對這個問題第一想到的就是用cookie去緩存， 但是總覺得怪怪的， 因為cookie的定位是存儲零散少量資料。
最終找到的解決辦法是使用HTML5的緩存功能
localStorage 不限時的存儲 除非使用者手動清理
sessionStorage 與會話綁定 會話結束 資料消失 相比之下直接無視localStorage
HTML5的緩存與cookie相比它可以存儲10M資料在用戶端， 不同流覽器可存儲的大小有所差異， 但都是cookie無法望其項背的。
當然， 它不如cookie的便利之處是它無法與服務端進行交互。
然並卵
我就是需要它：
sessionStorage.getItem(key):獲取指定key本機存放區的值
sessionStorage.setItem(key,value)：將value存儲到key欄位
sessionStorage.removeItem(key):刪除指定key本機存放區的值
sessionStorage.clear;刪除所有
列表頁的跳轉a標籤就直接做成 href="javascript:void(0)" onclick="go(url)"
點擊進入下面方法進行存儲 存好之後再跳轉
function go(url){ sessionStorage.setItem('index_list',$("#wrapper").html);//存儲清單資料 sessionStorage.setItem('index_page',page);//存儲頁碼 sessionStorage.setItem('index_scroll',$(window).scrollTop);//存儲捲軸位置 window.location.href = url; return false; }因為我做的列表載入效果是每次取出20條資料 每次展現5條 螢幕每次下滑到底就載入5條
當20條資料都載入完之後再下滑到底 就ajax請求伺服器再取20條過來 再每次5條的給用戶載入
我感覺這麼做用戶體驗非常快 至少用戶覺得非常快
有了ajax的加入 自然要把頁碼一起存儲
下面是頁面初始化進行判斷， 如果有緩存， 則使用緩存， 賦值頁碼， 恢復捲軸位置。 之後刪除緩存以免造成污染。
如果沒有緩存則走正常流程。
var l = sessionStorage.getItem('index_list'); if(null !== l && '' !== l){ //恢復資料 $("#wrapper").html(l); $(window).scrollTop(sessionStorage.getItem('index_scroll')); page = sessionStorage.getItem('index_page'); //刪除緩存 sessionStorage.removeItem('index_list'); sessionStorage.removeItem('index_scroll'); }else{ p = {$data|json_encode}; showData; };