localStorage保存用户主题偏好的两种写法

用户主题偏好是前端开发中常见的个性化需求，很多网站允许用户切换暗色模式、字体大小或配色方案。要实现这些功能，最直接的方式就是用localStorage把用户的选择存到浏览器里。localStorage是Web Storage API的一部分，数据会持久保留，即使关闭浏览器再打开也不会丢失，非常适合存储这类非敏感的用户设置。

如何用localStorage存取主题选择

具体操作其实不复杂，核心就是setItem和getItem两个方法。当用户点击切换主题按钮时，先读取当前主题状态，然后把新值用setItem存进去，比如localStorage.setItem('theme', 'dark')。同时要立即更新页面的CSS类或样式变量，让用户马上看到变化。页面加载时，用getItem把之前存的值拿出来，如果存在就直接应用，不存在就沿用默认主题。

实际开发中常遇到的一个问题是，如果用户清除了浏览器缓存或者开启了无痕模式，localStorage可能会被清空。这时候代码里要做好回退处理，默认给一个亮色主题。另外，存储的值只能是字符串，如果你要存布尔值或数字，记得用JSON.stringify转换一下，取出时再用JSON.parse还原。

localStorage存储主题的兼容性和局限性

绝大多数现代浏览器都支持localStorage，包括移动端的微信内置浏览器和各类App的WebView。但要注意，localStorage的存储上限一般在5MB左右，存几个主题开关完全够用，千万别往里塞图片或大段文本。还有一个容易被忽略的点，localStorage是同步操作的，如果存的数据特别大，可能会阻塞主线程，不过存主题偏好这种轻量级数据完全不用担心。

如果项目需要兼容非常老的IE浏览器，比如IE6或IE7，localStorage就不支持了。这时候可以考虑用cookie做降级方案，但cookie每次请求都会带到服务端，有点浪费带宽。大部分现代项目直接使用localStorage就够了，配上简单的判断是否存在即可。

用localStorage存用户主题偏好是很成熟的做法，代码量少，逻辑清晰。关键在于存取时机要把握好，页面初始化时读取，用户操作时写入，同时把界面变化同步到位。做好默认值处理，就算存储被清空也不影响正常使用。这种方案既不需要后端接口，也不需要引入第三方库，非常适合中小型项目快速实现个性化体验。