localStorage 本地存储的学习笔记

2026-09-01 · 阅读 3 分钟

刷新页面以后 JS 里的变量就全没了。想让数据留下来（比如记住主题色、最高分），最简单的办法就是 localStorage——浏览器提供的一小块本地存储空间。

基本用法

// 存：只能存字符串
localStorage.setItem('bestScore', '6');

// 取
const best = localStorage.getItem('bestScore'); // '6'，没有就是 null

// 删
localStorage.removeItem('bestScore');

存对象要转成字符串

localStorage 只认字符串，存对象会变成 [object Object]。要用 JSON 转一下：

const settings = { theme: 'dark', volume: 0.8 };

// 存之前变成字符串
localStorage.setItem('settings', JSON.stringify(settings));

// 取出来再变回对象
const saved = JSON.parse(localStorage.getItem('settings'));
console.log(saved.theme); // 'dark'

我踩过的坑

坑一：存进去的数字取出来是字符串，'6' + 1 会得到 '61'。取出来要 parseInt 或者 Number() 转一下再用。

坑二：JSON.parse 解析 null 会报错。如果键不存在，getItem 返回 null，直接 parse 就炸了。稳妥的写法：

const raw = localStorage.getItem('settings');
const saved = raw ? JSON.parse(raw) : null;

坑三：localStorage 是跟着域名走的，本地打开的页面和生产网站的存储不是同一份，调试的时候别搞混。

容量和适用范围

一般给 5MB 左右，只适合存小数据（设置、偏好、简单记录）。大文件不合适，敏感信息（密码这类）绝对不能放——它没有任何加密，页面上跑的脚本都能读。

小结

接下来我打算给猜数字练习加一个"历史最少次数"的记录，就用 localStorage 存，正好练手。