JavaScript本地数据存储sessionStorage与localStorage使用详解
本文详解JavaScript中sessionStorage与localStorage两种本地存储机制。sessionStorage数据随窗口关闭清除，适用于单页临时数据；localStorage数据永久保存，多窗口共享。文章通过具体代码示例演示了setItem、getItem、removeItem及clear方法的使用，并结合登录注册案例说明如何存储字符串数据及JSON对象，帮助开发者掌握Web端数据持久化技术。
示例场景：
该登录注册界面案例未接入数据库，而是依托本地存储技术实现，下文将解析本地存储的具体机制：
本地存储属性
- 数据持久化于用户浏览器端
- 配置与读取便捷，且页面刷新不导致数据丢失
- 存储容量充裕，sessionStorage约为5MB，localStorage约为20MB。
- 仅支持字符串存储，对象需经JSON.stringify()序列化后方可存入
window.sessionStorage
特性
- 生命周期截止于浏览器窗口关闭
- 同一窗口（页面）内数据可共享
- 采用键值对机制进行存储操作
操作方法
写入数据：
sessionStorage.setItem(key,value)读取数据：
sessionStorage.getItem(key)移除指定数据：
sessionStorage.removeItem(key)清除全部数据：
sessionStorage.clear()在浏览器中点击该按钮并进入Application面板即可查看已存储的数据
数据存储于Storage目录下，sessionStorage与localStorage的数据相互隔离
实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
console.log(localStorage.getItem('username'));
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function() {
// 当我们点击了之后，就可以把表单里面的值存储起来
var val = ipt.value;
sessionStorage.setItem('uname', val);
sessionStorage.setItem('pwd', val);
});
get.addEventListener('click', function() {
// 当我们点击了之后，就可以把表单里面的值获取过来
console.log(sessionStorage.getItem('uname'));
});
remove.addEventListener('click', function() {
//
sessionStorage.removeItem('uname');
});
del.addEventListener('click', function() {
// 当我们点击了之后，清除所有的
sessionStorage.clear();
});
</script>
</body>
</html>点击首个存储按钮后，输入内容‘www'存入变量val，随后以键值对形式保存至浏览器，右侧Application面板可展示存储的键值对
window.IocalStorage
特性
- 生命周期永久有效，除非手动删除，否则关闭页面后数据依然存在
- 支持多窗口（页面）共享（同一浏览器环境下可共享）
- 采用键值对机制进行存储操作
操作方法
写入数据：
localStoragesetItem(key,value)读取数据：
localStorage.getItem(key)移除指定数据：
localStorage.removeItem(key)清除全部数据：
localStorage.clear()IocalStorage的应用方式与sessionStorage一致，区别在于IocalStorage生命周期永久有效，即使关闭浏览器，下次打开时数据依然存在，这是其显著特征
综合实战
针对此类登录注册页面，需实现如引言所述的数据保存功能，并验证登录页输入的用户名与密码是否与本地存储数据完全匹配。如何利用前述本地存储知识点完成此案例？
实现思路
可声明数组存储注册页输入的用户名，并通过本地存储将用户名和密码保存至浏览器。返回登录页后，先校验用户名是否存在于数组中，若存在则在本地存储中查找对应密码，若与登录页输入密码一致，则判定登录成功
至此，关于JavaScript本地数据存储sessionStorage与localStorage使用详解的介绍完毕，更多相关JS sessionStorage与localStorage内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00