HTML5 本地存储与应用缓存
目录
LocalStorage
Web Storage 包括两种具体实现:LocalStorage和 sessionStorage
localStorage
:长期存储在用户浏览器中的键值对数据,除非手动清除,否则数据会一直保留。即使用户关闭浏览器再重新打开,数据仍然存在。容量一般在 5MB 左右(具体取决于浏览器实现)。适合存储用户偏好、设置、少量非敏感数据等。
// 检查浏览器是否支持 Web Storage
if ('localStorage' in window) {
// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
const value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();
}
SessionStorage
Web Storage 包括两种具体实现:LocalStorage和 sessionStorage
sessionStorage
:与 localStorage
类似,也是以键值对形式存储数据,但其生命周期与浏览器会话(session
)绑定。当浏览器窗口或标签页关闭时,sessionStorage
中的数据将被清除。适合临时存储与当前会话相关的数据,如临时表单数据、界面状态等。
// 检查浏览器是否支持 Web Storage
if ('sessionStorage' in window) {
// 存储数据
sessionStorage.setItem('key', 'value');
// 获取数据
const value = sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 清空所有数据
sessionStorage.clear();
}
AppCache
应用程序缓存(Application Cache, AppCache) 是 HTML5 提供的一种离线浏览技术,允许将网站的资源(HTML、CSS、JavaScript、图片等)缓存到用户的本地系统中,以便在没有网络连接或网络速度慢的情况下,用户仍能正常访问应用。AppCache 使用一个名为 manifest 的清单文件来指定哪些资源应被缓存。
使用 AppCache 的基本步骤:
- 创建一个 manifest 文件(如appcache.manifest),列出要缓存的资源:
CACHE MANIFEST
# Version 1.0
index.html
styles/main.css
scripts/app.js
images/logo.png
<!DOCTYPE html>
<html lang="en" manifest="appcache.manifest">
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
- 浏览器在加载带有 manifest 属性的页面时,会自动尝试下载并解析清单文件,按指示缓存指定资源。
- 当网络不可用或用户再次访问应用时,浏览器会直接使用缓存的资源呈现页面。
尽管 AppCache 为早期离线应用提供了支持,但由于其设计上的局限性和一些已知问题,如更新机制复杂、对HTTPS要求严格、不支持Service Workers等,W3C 已将其标记为过时,并推荐使用 Service Workers 作为替代方案。
Service Workers
Service Workers 是一种独立于网页主线程运行的脚本,能够拦截、处理网络请求,管理缓存,实现离线功能、推送通知、后台同步等。相比 AppCache,Service Workers 提供了更精细的控制、更灵活的缓存策略和更好的更新机制。
使用 Service Workers 的基本步骤:
- 注册 Service Worker:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(registration => {
console.log('Service Worker registered:', registration);
}).catch(error => {
console.error('Service Worker registration failed:', error);
});
});
}
- 在 sw.js 文件中编写
Service Worker
策略,如缓存资源、处理请求、实现离线回退逻辑等:
// sw.js
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-app-cache').then(cache => {
return cache.addAll([
'/index.html',
'/styles/main.css',
'/scripts/app.js',
'/images/logo.png'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
总结来说,HTML5 提供了多种本地存储与应用缓存技术以满足不同的需求:
- Web Storage(localStorage、sessionStorage):简单、轻量级的键值对存储,适用于小规模数据持久化。
- IndexedDB:复杂、功能强大的客户端数据库,用于存储大量结构化数据。
- 应用程序缓存(AppCache):已过时的离线浏览技术,被 Service Workers 所取代。
- Service Workers:现代浏览器支持的高级技术,用于实现离线功能、网络请求拦截与处理、资源缓存管理等。
原文地址:https://blog.csdn.net/A1215383843/article/details/139035451
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!