H5API：本地储存 sessionStorage和localStorage

本文链接：https://blog.youkuaiyun.com/YYQingJs/article/details/125943390

本文介绍了Web存储中的sessionStorage和localStorage的使用方法和特性。sessionStorage用于存储约5M的数据，生命周期为浏览器关闭，只在同个页面标签内共享；localStorage则可存储约20M的数据，数据永久保存，除非手动删除，多标签和窗口间共享。示例代码展示了如何进行数据的设置、读取和删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sessionStorage本地存储约5M 生命周期：浏览器关闭，单个网页标签共享

localStorage 本地存储约20M 生命周期：永久保存，只能手动删除，单个浏览器多标签多窗口共享

sessionStorage


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type='text' id='txt' /><br /><br />
	<input type="button" id='set' value='设置数据' />
	<input type="button" id='get' value='读取数据' />
	<input type="button" id='del' value='删除数据' />
	<script type="text/javascript">
		var Data = document.querySelector('#txt');
		// sessionStorage本地存储 约5M  生命周期：浏览器关闭，单个网页标签共享
		// localStorage 本地存储 约20M  生命周期：永久保存，只能手动删除，单个浏览器多标签 多窗口共享，
		// 只能存储字符串  可以使用对象JSON.stringify()编码后储存
		// 
		// 1.设置数据
		var setData = document.querySelector('#set');
			setData.onclick = function() {
				// window.sessionStorage.setItem 存储数据  参数一是key 参数二是内容
				window.sessionStorage.setItem('username', Data.value);
		}
		// 2.读取数据
		var getData = document.querySelector('#get');
			getData.onclick = function() {
				// window.sessionStorage.getItem 读取数据  参数一是key 存储数据时设置的标识
				var user = window.sessionStorage.getItem('username');
				alert(user);
			}
			
		// 3.删除数据
		var delData = document.querySelector('#del');
			delData.onclick = function(){
				// window.sessionStorage.removeItem 删除数据  参数一是key 存储数据时设置的标识
				window.sessionStorage.removeItem('username');
				//window.sessionStorage.clear();  删除所有数据 
				// window.sessionStorage.clear();

	</script>
</body>
</html>

localStorage


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type='text' id='txt' /><br /><br />
	<input type="button" id='set' value='设置数据' />
	<input type="button" id='get' value='读取数据' />
	<input type="button" id='del' value='删除数据' />
	<script type="text/javascript">
		var Data = document.querySelector('#txt');
		// sessionStorage本地存储 约5M  生命周期：浏览器关闭，单个网页标签共享
		// localStorage 本地存储 约20M  生命周期：永久保存，只能手动删除，单个浏览器多标签 多窗口共享，
		// 只能存储字符串  可以使用对象JSON.stringify()编码后储存
		// 
		// 1.设置数据
		var setData = document.querySelector('#set');
			setData.onclick = function() {
				// window.localStorage.setItem 存储数据  参数一是key 参数二是内容
				window.localStorage.setItem('username', Data.value);
		}
		// 2.读取数据
		var getData = document.querySelector('#get');
			getData.onclick = function() {
				// window.localStorage.getItem 读取数据  参数一是key 存储数据时设置的标识
				var user = window.localStorage.getItem('username');
				alert(user);
			}
			
		// 3.删除数据
		var delData = document.querySelector('#del');
			delData.onclick = function(){
				// window.localStorage.removeItem 删除数据  参数一是key 存储数据时设置的标识
				window.localStorage.removeItem('username');
				// 可能其它网站开发者也存储了数据，清除所有会删除所有记录
				//window.localStorage.clear();  删除所有数据 【不推荐使用 】
				// window.localStorage.clear();
				}

	</script>
</body>
</html>