localStorage 的实现

本文介绍了localStorage的基本用法,包括数据的存储、读取和删除等关键操作,并提供了详细的代码示例。

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

localStorage 实现了本地的永久存储;

这一点和sessionStorage不同,后者在会话结束就清除了;


先来看看localStorage的添加,应该是设置,“添加”不准确;

方法:setItem( );

实例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>localstorage</title>
</head>
<body>
<script>
localStorage.setItem("cvper","skate and music!");
</script>
</body>
</html>


然后执行这个网页文件,再打开控制台查看:我们可以看到数据已经存储进去,而且是永久存储



下面看看如何获取已经存储的数据:

方法:  getItem( ) 

实例:在上面设置的基础上修改一下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>localstorage</title>
</head>
<body>
<script>
console.log(localStorage.getItem("cvper"))
</script>
</body>
</html>

控制台输出  :skate and music!


再来看看如何删除设置的数据:

方法:removeItem( )

实例:在上面的基础上修改

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>localstorage</title>
</head>
<body>
<script>
localStorage.removeItem("cvper");
</script>
</body>
</html>


再去查看localstorage 里面已经没有信息了;


最后一个方法:清除  clear( )  使用: localstoage.clear();   请自行尝试吧。。。




评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值