h5 Web存储

最新推荐文章于 2022-12-11 15:06:09 发布

无名之悲

最新推荐文章于 2022-12-11 15:06:09 发布

阅读量83

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_52554179/article/details/124269714

版权

该博客介绍了Web存储的两种方式——localStorage和sessionStorage。localStorage用于长期存储数据，即使浏览器关闭后数据依然存在，可用于记录用户的访问次数，显示第几次访问。而sessionStorage则在当前会话期间存储数据，当浏览器窗口关闭，数据将被清除，适合临时保存会话信息。示例代码展示了如何使用这两种存储来更新和显示页面上的访问计数。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Web存储</title>
</head>
<body>
	<p id="lcount"></p>
	<p id="scount"></p>
	<script>
		// localStorage在本地存储数据，长期保存
		if(localStorage.visitCount!=null){
            localStorage.visitCount=Number(localStorage.visitCount)+1;
		}else{
			localStorage.visitCount=1;
		}
		document.getElementById('lcount').innerText="第"+localStorage.visitCount+"次访问。"
		// localStorage.removeItem("visitCount");   // 清除localStorage保存的“visitCount”数据

		// sessionStorage在本地存储数据，保存时间为这一次访问网站的时间。 浏览网站结束，sessionStorage清空。
		if(sessionStorage.visitCount!=null){
            sessionStorage.visitCount=Number(sessionStorage.visitCount)+1;
		}else{
			sessionStorage.visitCount=1;
		}
		document.getElementById('scount').innerText="第"+sessionStorage.visitCount+"次访问。"
	</script>
</body>
</html>

无名之悲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫