什么是HTML5的离线存储？

简单来说，它就是让网页在没网的时候也能“跑”起来，或者至少能记住点东西。这对提升用户体验帮助太大了。以前浏览器一关，数据全丢，现在可不一样了。

HTML5里常用的离线存储方式主要有两种：localStorage和sessionStorage。它们用起来都很简单，就像个在浏览器里的键值对“小本子”。先看段代码：

localStorage.setItem('username', '张三');
let name = localStorage.getItem('username');

localStorage存的数据会一直存在，除非你主动删掉或者清浏览器缓存。它很适合存一些用户偏好设置，比如主题颜色、语言选项。

sessionStorage跟它很像，用法几乎一样，但生命周期只在一个浏览器标签页的会话期间。页面一关，数据就清空了。它适合存一些临时信息，比如表单分步骤填写的中间状态。

sessionStorage.setItem('form_step', '2');

还有一种更“重型”的离线能力叫应用缓存，通过一个清单文件来告诉浏览器需要缓存哪些资源（像HTML、CSS、JS、图片）。不过这套机制现在逐渐被更强大的Service Worker替代了，但你了解这个发展脉络也挺好。

用这些技术时，心里得有点数。别用来存敏感信息，因为数据就在用户本地，谁都能看。而且存储空间是有限的，通常一个域名下是5MB左右，存太多东西浏览器会“抱怨”。但不管怎么说，用好离线存储，确实是打造现代Web应用的一个基本功。