自学web前端练手——js的localStorage

最新推荐文章于 2022-05-01 16:17:16 发布

lvshaoshishang

最新推荐文章于 2022-05-01 16:17:16 发布

阅读量146

点赞数

分类专栏：自学web前端文章标签： javascript html

本文链接：https://blog.csdn.net/lvshaoshishang/article/details/105017556

版权

自学web前端专栏收录该内容

31 篇文章 2 订阅

订阅专栏

localStorage是持久化的本地存储，sessionStorage不是，它是伴随着session，窗口一旦关闭就没了。
本次效果不是主要的，而是方便自己理解localStorage和sessionStorage的区别。

效果如下：
连续点击“点击计数！”按钮会显示已点击的次数在这里插入图片描述
关闭页面再次打开页面，点击“点击计数！”按钮会在上次点击次数基础上再加一次，而不会清零后重新从0开始算起计数

点击清零后，再次点击计数，计数会在置零的基础上加一。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p><button onclick="clickCounter()">点击计数！</button></p>
	<p><button onclick="del()">点击清零！</button></p>
	<div id="result"></div><!-- 点击次数将在这里显示 -->
	<p>点击该按钮查看计数器的增加</p>
	<p>关闭浏览器选项卡（或窗口），重新打开次页面，计数器将继续计数（不是重置）</p>
	<script>
	function clickCounter(){
		if(localStorage.clickcount){
			localStorage.clickcount=Number(localStorage.clickcount)+1;
		}
		else{
			localStorage.clickcount=1;
			//当第一次打开窗口时localStorage为undefined，隐式转换为false，所以跳转到else置为1
		}
		document.getElementById('result').innerHTML="你已经点击了按钮"+localStorage.clickcount+"次";
	}
	function del(){
		localStorage.removeItem("clickcount");//removeItem可把对应项删除
		document.getElementById('result').innerHTML="计数清零";
	}
	</script>
</body>
</html>

lvshaoshishang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学web前端练手——js的localStorage

localStorage是持久化的本地存储，sessionStorage不是，它是伴随着session，窗口一旦关闭就没了。本次效果不是主要的，而是方便自己理解localStorage和sessionStorage的区别。效果如下：连续点击“点击计数！”按钮会显示已点击的次数关闭页面再次打开页面，点击“点击计数！”按钮会在上次点击次数基础上再加一次，而不会清零后重新从0开始算起计数...
复制链接

扫一扫