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

点此查看所有教程、项目、源码导航文章目录1. 背景2. WebStorage 基础特点3. localStorage 持久化存储4. sessionStorage 会话存储5. localStorage 和 sessionStorage 对比6. 入门常见坑点6.1 存入的值都会自动转为字符串6.2 不能直接存对象、数组6.3 只能在浏览器环境运行7. 小结1. 背景前面我们写的 DOM、BOM 案例有一个共同的问题只要刷新页面、关闭浏览器标签我们写的数据就全部消失了。因为 JS 里普通变量的数据是存放在内存中的页面一旦销毁内存就会释放数据没法保留。实际开发里我们经常需要把少量数据保存在浏览器里面下次打开页面还能继续读取这个能力就是本地存储。浏览器给我们提供了 WebStorage包含两个对象localStorage和sessionStorage。补充说明还有一种更早的存储方案叫做 Cookie它诞生时间更早使用场景更多和后端配合存储容量很小入门阶段我们先不深入讲解大家知道有这个东西即可。2. WebStorage 基础特点它们都是 window 身上的属性属于浏览器提供的 API完整写法window.localStorage、window.sessionStoragewindow 可以省略。只能保存字符串类型。如果直接放对象、数组会出现[object Object]这个问题这个问题我们放到下一篇结合 JSON 来解决。存储容量大概 5MB适合存放少量简单数据不适合存图片、视频这类大文件。存储的数据是按照「键值对」的形式存放一个键key对应一个值value。3. localStorage 持久化存储localStorage 是持久化本地存储。✅ 特点数据保存之后关闭标签页、关闭浏览器数据依然存在需要通过代码删除或者手动清除浏览器缓存数据才会消失。✅ 同一个域名下不同标签页可以共享 localStorage 的数据。它有 4 个核心方法// 3.1 存数据setItem(键名, 值)localStorage.setItem(username,小明);// 3.2 读数据getItem(键名)varnamelocalStorage.getItem(username);console.log(name);// 3.3 删除某一条数据removeItem(键名)localStorage.removeItem(username);// 3.4 清空全部数据clear()localStorage.clear();小提示如果读取一个不存在的 keygetItem 返回 null我们可以用这个判断数据有没有存过。我们来看下执行localStorage.setItem(username, 小明);代码后数据到底存到哪了这里可以发现实际上是存储到浏览器一个叫做“本地存储”的区域里面去了。4. sessionStorage 会话存储sessionStorage 是会话级别的存储。✅ 特点只在当前标签页会话内有效只要关闭这个标签页里面的数据直接清空。✅ 不同标签页之间sessionStorage 互相隔离不能共享。方法和 localStorage 完全一模一样只是对象名字不同// 存sessionStorage.setItem(age,18);// 读varagesessionStorage.getItem(age);console.log(age);// 删除单条sessionStorage.removeItem(age);// 清空全部sessionStorage.clear();我们继续看下执行sessionStorage.setItem(age, 18);后数据存储到哪了。这里可以发现实际上是存储到浏览器一个叫做“Session Storage”的区域里面去了。5. localStorage 和 sessionStorage 对比表格对比项localStoragesessionStorage生命周期永久保存需要手动清除当前标签页关闭标签页自动清空跨标签页共享同域名下多个标签页共享每个标签页独立互不共享APIsetItem / getItem / removeItem / clear和左边完全一样存储大小约 5MB约 5MB6. 入门常见坑点6.1 存入的值都会自动转为字符串localStorage.setItem(num,100);varreslocalStorage.getItem(num);console.log(typeofres);// string存的数字拿出来变成字符串如果后续需要使用数字进行计算读取之后要自己转成数字。6.2 不能直接存对象、数组varuser{name:小红,age:20};localStorage.setItem(user,user);varulocalStorage.getItem(user);console.log(u);// [object Object]不是我们想要的数据这个问题暂时先记住下一篇学习 JSON 之后就可以解决对象、数组的存储。6.3 只能在浏览器环境运行localStorage、sessionStorage 是浏览器提供的 API不属于 ES 语法在 Node.js 里面不能直接使用。7. 小结WebStorage 包含 localStorage、sessionStorage用来在浏览器本地保存少量数据。localStorage持久存储关闭浏览器数据还在同域名标签页共享。sessionStorage会话存储关闭当前标签页数据直接消失标签页隔离。四个通用方法setItem 存、getItem 读、removeItem 删单条、clear 清空全部。存储只能存字符串数字取出会变成字符串对象数组不能直接存储下一篇结合 JSON 实战。