副队长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 实战。

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

相关推荐

副队长JavaScript教程(63)-BOM之窗口大小与页面滚动

认识Minilytics：免费自托管分析工具，告诉你到底是哪条推文让你赚了钱

脉冲雷达回波的距离门重排与匹配滤波原理及实现

更多资讯

副队长JavaScript教程(62)-BOM之定时器

副队长JavaScript教程(61)-BOM之location、history、navigator常见用法

数据图表也有设计门槛：6款主流产品谁能做出更专业的商业图表？

AWESOME-OCR-LLM完整指南：一文读懂大模型时代OCR的900+篇论文全景

MediaPipe手势识别Android集成实战：从关键点到源码避坑

一枚回形针的门道：材料工艺、办公整理与手工改造全拆解

今日更新

AI智能体开发实战：从技术原理到商业落地

OpenShell 完全定制指南：从安装到深度配置，打造高效 Windows 开始菜单

Superpowers技能体系全解析：从Skills引入到安装的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？