html网页的临时缓存数据通常存储在客户端，常见的存储类型包括localStorage、sessionStorage、cookie、IndexedDB等，不同类型的缓存清除方式存在差异，需要根据实际场景选择对应的方法。
localStorage缓存清除
localStorage是持久化存储，除非主动清除否则会一直存在，清除方式分为清除单个条目和清除全部条目两种。
清除单个localStorage条目
使用localStorage.removeItem()方法，传入对应的键名即可删除指定缓存。
// 假设之前存储了键名为user_info的缓存
localStorage.setItem('user_info', JSON.stringify({name: '张三', age: 20}));
// 清除单个user_info缓存
localStorage.removeItem('user_info');
清除全部localStorage缓存
使用localStorage.clear()方法可以清空当前域名下所有的localStorage缓存。
// 清空所有localStorage缓存 localStorage.clear();
sessionStorage缓存清除
sessionStorage仅在当前浏览器标签页有效，关闭标签页后缓存会自动清除，也可以主动清除。
清除单个sessionStorage条目
方法和localStorage类似，使用sessionStorage.removeItem()方法。
// 存储sessionStorage缓存
sessionStorage.setItem('temp_token', 'abc123');
// 清除单个temp_token缓存
sessionStorage.removeItem('temp_token');
清除全部sessionStorage缓存
使用sessionStorage.clear()方法清空当前标签页的所有sessionStorage缓存。
// 清空所有sessionStorage缓存 sessionStorage.clear();
cookie缓存清除
cookie的清除需要设置过期时间为过去的时间，或者删除指定键名的cookie。
删除指定cookie
通过修改cookie的expires属性为过去的时间戳，让浏览器自动清除该cookie。
// 删除键名为user_token的cookie
function deleteCookie(cookieName) {
document.cookie = cookieName + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}
// 调用方法删除cookie
deleteCookie('user_token');
清除所有cookie
遍历当前域名下的所有cookie，逐个设置过期时间清除。
// 清除当前域名下所有cookie
function clearAllCookies() {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i];
const eqPos = cookie.indexOf('=');
const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}
}
// 调用方法清除所有cookie
clearAllCookies();
IndexedDB缓存清除
IndexedDB是较复杂的客户端数据库，清除需要删除对应的数据库或者对象仓库。
删除整个IndexedDB数据库
使用indexedDB.deleteDatabase()方法，传入数据库名称即可删除整个数据库。
// 删除名为my_database的IndexedDB数据库
const deleteRequest = indexedDB.deleteDatabase('my_database');
deleteRequest.onsuccess = function() {
console.log('数据库删除成功');
};
deleteRequest.onerror = function() {
console.log('数据库删除失败');
};
清空IndexedDB对象仓库数据
打开数据库后，通过事务清除对象仓库内的所有数据。
// 清空名为user_store的对象仓库数据
const request = indexedDB.open('my_database', 1);
request.onsuccess = function(event) {
const db = event.target.result;
// 开启读写事务
const transaction = db.transaction(['user_store'], 'readwrite');
const store = transaction.objectStore('user_store');
// 清空对象仓库
const clearRequest = store.clear();
clearRequest.onsuccess = function() {
console.log('对象仓库数据清空成功');
};
};
浏览器层面清除网页缓存
如果需要清除浏览器存储的所有网页临时缓存，可以通过浏览器设置操作。
- Chrome浏览器：点击右上角三个点，选择设置，进入隐私和安全，点击清除浏览数据，勾选缓存的图片和文件、Cookie和其他网站数据等选项，选择时间范围后点击清除数据。
- Firefox浏览器：点击右上角三个横线，选择设置，进入隐私与安全，在Cookie和网站数据板块点击清除数据，勾选对应选项后确认清除。
- Edge浏览器：点击右上角三个点，选择设置，进入隐私、搜索和服务，点击选择要清除的内容，勾选对应缓存选项后清除。
不同缓存清除场景选择
如果是开发调试阶段需要清除缓存，优先使用代码层面的清除方法，针对性处理对应类型的缓存；如果是用户反馈页面异常，可引导用户在浏览器层面清除对应网站的缓存；如果是临时会话数据，直接使用sessionStorage，关闭标签页即可自动清除，无需额外操作。
localStoragesessionStoragecookieIndexedDB修改时间：2026-07-12 13:15:27