sessionStorage、localStorage和cookie的区别

最新推荐文章于 2025-01-13 15:33:25 发布

久如云漂泊

最新推荐文章于 2025-01-13 15:33:25 发布

阅读量467

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 数据存储文章标签：存储 cookie session

本文链接：https://blog.youkuaiyun.com/u012123026/article/details/72852015

html5 同时被 2 个专栏收录

44 篇文章

订阅专栏

数据存储

1 篇文章

订阅专栏

本文详细对比了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") 
}