AJAX和jQuery是現代網頁開發的重要組成部分。它們使得網頁可以動態地加載內容、展示列表、處理表單等。當網頁需要展示大量的數據時，分頁緩存是非常重要的，可以提升用戶體驗和網頁性能。以下是一個簡單的實例，我們將使用AJAX和jQuery來展示數據列表。

/**
 * 初始化數據列表
 */
function initList(){
$.ajax({
url: '/api/list',
type: 'GET',
dataType: 'json',
data: {page: 1},
success: function(data){
// 將列表數據展示在HTML頁面上
renderList(data.list);
// 初始化頁碼
initPagination(data.totalPage);
// 緩存第一頁數據
sessionStorage.setItem('page1', JSON.stringify(data));
}
});
}
/**
 * 點擊頁碼加載對應數據
 */
function loadListByPage(page){
var cache = sessionStorage.getItem('page'+page);
if(cache){
// 如果數據已經緩存，則直接使用緩存數據
var data = JSON.parse(cache);
renderList(data.list);
} else {
// 如果數據未緩存，則使用AJAX獲取數據
$.ajax({
url: '/api/list',
type: 'GET',
dataType: 'json',
data: {page: page},
success: function(data){
// 將列表數據展示在HTML頁面上
renderList(data.list);
// 緩存數據
sessionStorage.setItem('page'+page, JSON.stringify(data));
}
});
}
}
/**
 * 渲染數據列表
 */
function renderList(list){
// 清空列表
$('#list').html('');
// 將列表數據展示在HTML頁面上
for(var i=0; i

上述代碼中，我們使用了sessionStorage來緩存列表數據。當用戶點擊頁碼時，會判斷該頁數據是否已經被緩存，如果已經緩存則直接使用緩存數據，否則使用AJAX獲取數據。這個簡單的分頁緩存實例可以提高網頁性能，避免不必要的AJAX請求，同時也可以優化用戶體驗。