sessionStorage、localStorage和cookie的区别

本文详细对比了Cookie、sessionStorage和localStorage的特点与应用场景。探讨了它们的大小限制、生命周期、跨域能力以及如何在前端开发中有效利用这些特性来缓存数据、减少内存占用。

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

1大小是受限,
2每次请求一个新页面Cookie都会被发送,无形中浪费了带宽,
3cookie还需要指定作用域,不可以跨域调用。
4不可或缺性:Cookie的作用是与服务器进行交互

sessionStorage:(本地“存储”数据而生)

1浏览器前进后退还是刷新,数据依然存在
2关闭窗口会清空数据
3同一个会话中的页面才能访问,时会话级别的存储

localStorage

localStorage和sessionStorage相似,只是localStorage是没有时间限制的数据存储,
相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。
注意:页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
使用localStorage和sessionStorage的好处:
1 缓存数据
2 减少对内存的占用

//localStorage同样用法。
//清空
sessionStorage.clear()
  //删除
sessionStorage.removeItem(key)
 //存入字段
 sessionStorage.setItem("key", "value");
 //读取字段
 result = sessionStorage.getItem("key");

 //存入对象
sessionStorage.setItem(key, JSON.stringify(val));
//读取对象
 result=JSON.parse(sessionStorage.getItem(key));

//通过getItem或直接使用sessionStorage["key"]获取到的信息均为实际存储的副本。
if(window.localStorage){     
    alert("浏览支持localStorage") 
}else{   
     alert("浏览暂不支持localStorage") } 
//或者 
if(typeof window.localStorage == 'undefined')
{   
    alert("浏览暂不支持localStorage") 
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值