js -- 本地存储--会话存储

最新推荐文章于 2025-10-09 16:15:24 发布

转载最新推荐文章于 2025-10-09 16:15:24 发布 · 1.5k 阅读

JavaScript笔记本专栏收录该内容

83 篇文章

订阅专栏

本文深入探讨了本地存储(localStorage)与会话存储(sessionStorage)的使用方法，包括数据的存储、获取、更新、删除及清除操作。通过实例代码展示了如何在网页中实现这两种存储方式，适用于前端开发人员学习与实践。

本地存储

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地存储</title>
</head>
    <input type="text" />
    <button>localStorage存储</button>
    <button>localStorage获取</button>
    <button>localStorage更新</button>
    <button>localStorage删除</button>
    <button>localStorage清除</button>
</body>
<script>
    var inp=document.querySelector("input");
    var butArr=document.querySelectorAll("button");
    // 设置
    butArr[0].onclick=function () {
        window.localStorage.setItem("userName",inp.value);
    }
    // 获取
    butArr[1].onclick=function () {
        inp.value=window.localStorage.getItem("userName");
    }
    // 删除
    butArr[3].onclick=function () {
        window.localStorage.removeItem("userName");
    }
</script>
</html>

会话存储

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
	<input type="text" />
	<button>sessionStorage存储</button>
	<button>sessionStorage获取</button>
	<button>sessionStorage更新</button>
	<button>sessionStorage删除</button>
	<button>sessionStorage清除</button>
</body>
<script>
	var inp=document.querySelector("input");
	var btnArr=document.querySelectorAll("button");
	
	btnArr[0].onclick=function () {
		//sessionStorage 储存数据
		window.sessionStorage.setItem("userName",inp.value);
	}
	btnArr[1].onclick=function () {
		//sessionStorage 获取数据
		inp.value=window.sessionStorage.getItem("userName");
		console.log(1);
	}
	btnArr[2].onclick=function () {
		window.sessionStorage.setItem("userName",inp.value);
	}
	btnArr[3].onclick=function () {
		//sessionStorage 删除某一条数据
		window.sessionStorage.removeItem("userName");
	}
	btnArr[4].onclick=function () {
		//sessionStorage 清除全部数据
		window.sessionStorage.clear();
	}
</script>
</html>