如何实现HTML5的本地存储？

这功能太实用了，它让浏览器变成了一个轻量级的数据库。咱们说的主要是localStorage和sessionStorage这两个对象，用它们存点小数据，比过去用Cookie方便得多。

你直接用window对象就能调用它们。方法非常简单，就几个关键操作：存、取、删、清空。看个最直接的例子：

// 存数据
localStorage.setItem('userName', '老王');

// 取数据
let name = localStorage.getItem('userName');

// 删掉某一个
localStorage.removeItem('userName');

// 全部清空
localStorage.clear();

sessionStorage的用法一模一样，只是换个对象名。它俩的区别在于寿命：localStorage的数据除非手动删除，否则一直存在；sessionStorage的数据只在当前页面会话期间有效，关掉标签页就没了。

有几点你得留意。第一，它们只能存字符串。如果你想存个对象或者数组，得先用JSON.stringify()转一下，取的时候再用JSON.parse()解析。

let user = { name: '张三', id: 1 };
localStorage.setItem('user', JSON.stringify(user));
let data = JSON.parse(localStorage.getItem('user'));

第二，容量有限制，通常一个域名下是5MB左右，别拿来存电影。第三，所有操作都是同步的，如果存非常大的数据可能会暂时卡住页面。

HTML5的这套本地存储API，特别适合保存用户偏好设置、缓存不敏感的表单数据，或者让应用在离线时还有点基本功能。上手没什么门槛，关键在于想清楚哪些数据值得在客户端存下来。