本地缓存localStorage和sessionStorage介绍

最新推荐文章于 2024-07-11 16:50:01 发布

发际线就是实力

最新推荐文章于 2024-07-11 16:50:01 发布

阅读量212

点赞数

文章标签： javascript html js

本文链接：https://blog.csdn.net/Cheris_LT/article/details/106480364

版权

localStorage

为编译器中的一个属性，可以保存本地数据，不管网页刷新还是再次打开都不会影响到数据的清除，除非清除浏览器的缓存才会删除到数据。localStorage支持的默认空间大小为5M,现代浏览器支持良好。

localStorage本身带有方法有

添加键值对：localStorage.setItem(key,value)

获取键值：localStorage.getItem()

删除键值对：localStorage.removeItem()

清除所有键值对：localStorage.clear()

获取localStorage的属性名称：localStorage.key()

获取localStorage中的键值对的数量：localStorage.length

注意：localStorage对象的属性值只能是字符串并且要通过域名访问的方式才能起作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 160px;
				height: 60px;
				border-radius: 20px;
				background-color: #f40;
				border: 1px solid #CCCCCC;
				color: white;
				line-height: 30px;
				text-align: center;
				margin: 50px auto;
				cursor: pointer;
			}
			
			.over {
				
				background-color: #999;
				
			}
		</style>
	</head>
	<body>
		<div>
			优惠券<br/>
			满￥20-￥5
		</div>
		
		<script type="text/javascript">
			var money=document.querySelector("div");
			
			if(localStorage.getItem("lingqu")==null){
				localStorage.setItem("lingqu",0)
			}else{
				money.classList.add("over");
			}
			
			
			money.onclick=function(){
				if(localStorage.getItem("lingqu")!=1){
					alert("恭喜您获得本店满减优惠券");
					this.style.backgroundColor="#999";
					localStorage.setItem("lingqu",1);
				}else{
					this.style.backgroundColor="#999";
					alert("已经领取优惠券")
				}
				
				return false
			}


		</script>

	</body>
</html>

sessionStorage

为编译器中的一个属性，可以保存本地数据，但是只针对于当前页面，在关闭窗口之后将会删除这些数据。如果如果重新打开页面或者创建新窗口打开页面则无法读取到之前的数据。用法和localStorage基本相同。可以通过sessionStorage记录当前页面某元素点击的次数，例如：

			document.body.onclick=function(){
				if (sessionStorage.click) {
				    sessionStorage.click=parseInt(sessionStorage.click)+1;
				} else {
				    sessionStorage.setItem("click",1)
				}
			}

发际线就是实力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地缓存localStorage和sessionStorage介绍

localStorage为编译器中的一个属性，可以保存本地数据，不管网页刷新还是再次打开都不会影响到数据的清除，除非清除浏览器的缓存才会删除到数据。localStorage支持的默认空间大小为5M,现代浏览器支持良好。localStorage本身带有方法有添加键值对：localStorage.setItem(key,value)获取键值：localStorage.getItem()删除键值对：localStorage.removeItem()清除所有键值对：localStorage.clear(
复制链接

扫一扫