JavaScript localStorage：让网页记住你的小习惯

你有没有发现，有些网站不用登录，也能记住你上次调过的字体大小，或者暗黑模式的开关状态？关了页面再打开，设置还在。这背后的小功臣，往往就是 ref="/tag/137/" style="color:#8B0506;font-weight:bold;">JavaScript 的 localStorage。

localStorage 是什么？

简单说，localStorage 是浏览器提供的一种“本地存储”能力。它能让网页在用户电脑上存点小数据，比如偏好设置、临时记录，而且这些数据不会因为关闭页面或重启浏览器就消失。

和 cookie 比，它更简单；和服务器数据库比，它更快——毕竟数据就在你自己的设备上。

怎么用？三句话讲明白

假设你正在做一个外设商城页面，想记住用户最后一次选的鼠标 DPI 档位。你可以这样写：

// 存数据
localStorage.setItem('lastDpi', '1600');

// 读数据
const savedDpi = localStorage.getItem('lastDpi');
console.log(savedDpi); // 输出 '1600'

// 删数据（比如恢复默认）
localStorage.removeItem('lastDpi');

就这么简单。下次用户进来，直接读 savedDpi，就能自动把鼠标预设调到他常用的那一档，体验顺滑不少。

实际场景：外设商城的灯光记忆

现在很多机械键盘支持 RGB 灯光调节。用户调了一堆颜色，结果一刷新，全没了。如果加上 localStorage，就能把这些配置存下来：

const userLighting = {
  mode: '呼吸',
  color: '#ff4500',
  speed: '中等'
};

// 存对象记得转成字符串
localStorage.setItem('lightingConfig', JSON.stringify(userLighting));

// 取的时候再转回来
const config = JSON.parse(localStorage.getItem('lightingConfig'));

这样即使用户没登录，换台电脑前临时试用，关掉页面再开，灯光设置还是他在上次调的样子。

注意点：别乱塞大东西

localStorage 虽好，但每个域名一般只能存 5MB 左右。存点设置没问题，要是拿它存用户下载的驱动文件，那就不合适了。另外，它只存字符串，对象要记得用 JSON.stringify 和 JSON.parse 转一下。

还有，它是同源的——也就是说，shop.example.com 存的数据，在 blog.example.com 上是拿不到的。安全，但也有限制。

对于普通用户来说，不需要懂代码。但如果你常折腾外设设置，会发现那些“贴心”的网页工具，很多都靠这点小技术撑起来的。