副队长JavaScript教程(64)-本地存储：localStorage 与 sessionStorage

点此查看所有教程、项目、源码导航

1. 背景

前面我们写的 DOM、BOM 案例有一个共同的问题：只要刷新页面、关闭浏览器标签，我们写的数据就全部消失了。

因为 JS 里普通变量的数据是存放在内存中的，页面一旦销毁，内存就会释放，数据没法保留。

实际开发里，我们经常需要把少量数据保存在浏览器里面，下次打开页面还能继续读取，这个能力就是本地存储。

浏览器给我们提供了 WebStorage，包含两个对象：localStorage和sessionStorage。

补充说明：还有一种更早的存储方案叫做 Cookie，它诞生时间更早，使用场景更多和后端配合，存储容量很小，入门阶段我们先不深入讲解，大家知道有这个东西即可。

2. WebStorage 基础特点

1. 它们都是 window 身上的属性，属于浏览器提供的 API，完整写法window.localStorage、window.sessionStorage，window 可以省略。
2. 只能保存字符串类型。如果直接放对象、数组，会出现[object Object]这个问题，这个问题我们放到下一篇，结合 JSON 来解决。
3. 存储容量大概 5MB，适合存放少量简单数据，不适合存图片、视频这类大文件。
4. 存储的数据是按照「键值对」的形式存放：一个键（key）对应一个值（value）。

3. localStorage 持久化存储

localStorage 是持久化本地存储。

✅ 特点：数据保存之后，关闭标签页、关闭浏览器，数据依然存在；需要通过代码删除，或者手动清除浏览器缓存，数据才会消失。
✅ 同一个域名下，不同标签页可以共享 localStorage 的数据。

它有 4 个核心方法：

// 3.1 存数据：setItem(键名, 值)localStorage.setItem("username","小明");// 3.2 读数据：getItem(键名)varname=localStorage.getItem("username");console.log(name);// 3.3 删除某一条数据：removeItem(键名)localStorage.removeItem("username");// 3.4 清空全部数据：clear()localStorage.clear();

小提示：如果读取一个不存在的 key，getItem 返回 null，我们可以用这个判断数据有没有存过。

我们来看下执行localStorage.setItem("username", "小明");，代码后，数据到底存到哪了：

这里可以发现，实际上是存储到浏览器一个叫做“本地存储”的区域里面去了。

4. sessionStorage 会话存储

sessionStorage 是会话级别的存储。

✅ 特点：只在当前标签页会话内有效；只要关闭这个标签页，里面的数据直接清空。
✅ 不同标签页之间，sessionStorage 互相隔离，不能共享。

方法和 localStorage 完全一模一样，只是对象名字不同：

// 存sessionStorage.setItem("age","18");// 读varage=sessionStorage.getItem("age");console.log(age);// 删除单条sessionStorage.removeItem("age");// 清空全部sessionStorage.clear();

我们继续看下，执行sessionStorage.setItem("age", "18");后，数据存储到哪了。

这里可以发现，实际上是存储到浏览器一个叫做“Session Storage”的区域里面去了。

5. localStorage 和 sessionStorage 对比

表格

6. 入门常见坑点

6.1 存入的值，都会自动转为字符串

localStorage.setItem("num",100);varres=localStorage.getItem("num");console.log(typeofres);// string，存的数字拿出来变成字符串

如果后续需要使用数字进行计算，读取之后要自己转成数字。

6.2 不能直接存对象、数组

varuser={name:"小红",age:20};localStorage.setItem("user",user);varu=localStorage.getItem("user");console.log(u);// [object Object]，不是我们想要的数据

这个问题暂时先记住，下一篇学习 JSON 之后，就可以解决对象、数组的存储。

6.3 只能在浏览器环境运行

localStorage、sessionStorage 是浏览器提供的 API，不属于 ES 语法，在 Node.js 里面不能直接使用。

7. 小结

1. WebStorage 包含 localStorage、sessionStorage，用来在浏览器本地保存少量数据。
2. localStorage：持久存储，关闭浏览器数据还在，同域名标签页共享。
3. sessionStorage：会话存储，关闭当前标签页数据直接消失，标签页隔离。
4. 四个通用方法：setItem 存、getItem 读、removeItem 删单条、clear 清空全部。
5. 存储只能存字符串，数字取出会变成字符串，对象数组不能直接存储，下一篇结合 JSON 实战。