要实现页面模板缓存功能，可以将模板保存在浏览器的本地存储中，下次访问同一页面时直接从本地存储中读取模板，避免了重新加载模板的过程。同时，可以为缓存添加一个过期时间，过期后重新加载模板。下面是一个代码示例：
// 存储模板到本地缓存中 function saveTemplateToCache(templateName, templateHtml) { localStorage.setItem(templateName, templateHtml); localStorage.setItem(templateName + '_timestamp', Date.now()); // 缓存时间戳 }
// 从本地缓存中获取模板 function getTemplateFromCache(templateName) { var templateHtml = localStorage.getItem(templateName); var timestamp = localStorage.getItem(templateName + '_timestamp'); var expiredTime = 60 * 1000; // 1分钟的缓存 if (!timestamp || Date.now() - timestamp > expiredTime) { // 缓存过期或不存在，需要重新加载模板 templateHtml = loadTemplateFromServer(templateName); saveTemplateToCache(templateName, templateHtml); } return templateHtml; }
// 从服务器加载模板 function loadTemplateFromServer(templateName) { // 发送 AJAX 请求获取模板 }
// 使用缓存中的模板 function renderTemplate(templateName) { var templateHtml = getTemplateFromCache(templateName); // 渲染页面 }
注意，以上示例只是一个简单的框架，具体实现过程需要根据实际情况进行调整。同时，本地存储的容量是有限的，需要注意缓存的大小和清理策略。