浏览器本地存储 localStorage、sessionStorage

本文介绍了浏览器中localStorage和sessionStorage的基本使用方法,包括存储、获取、删除数据等操作,并对比了两者的区别。

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

在这里插入图片描述

本地存储(localStorage )

存储

setItem

//键和值都是字符串
localStorage.setItem("stringKey","StringVal");
//即使存数字,也会转字符串
localStorage.setItem("num",666);
//存对象,默认调用objec的toString方法,无意义,可转化为json后再存储
const personObj = {
    name:"张三",
    age:18
}
localStorage.setItem("personObj",JSON.stringify(personObj));

浏览器本地存储空间:
F12观察
在这里插入图片描述

获取

getItem

var val;
val = localStorage.getItem("stringKey");
console.log("stringKey",val);
val = localStorage.getItem("num");
console.log("num",val);
val = localStorage.getItem("personObj");
console.log("personObj",val);
val = localStorage.getItem("不存在的key");
console.log("不存在的key",val);

在这里插入图片描述
观察到,如果获取一个不存在的key,结果是null

删除一个

localStorage.removeItem("stringKey");

在这里插入图片描述

清空所有

localStorage.clear();

在这里插入图片描述

会话存储(sessionStorage )

调用方法完全和localStorage一样,只用把上述代码中的localStorage换成sessionStorage 。

它在浏览器关闭的时候就会自动清除

总结

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值