Cookie和SessionStorage和LocalStorage的使用场景

于 2024-01-19 18:35:03 发布
阅读量409 收藏 9
点赞数 8
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zheyiw/article/details/135704786
版权
本文探讨了三种不同的会话管理方式：使用Cookie实现短暂跨页签共享，重启后需重新登录；LocalStorage提供长期跨页签共享，重启浏览器后无需重新登录；而SessionStorage则只在当前页签有效。
摘要由CSDN通过智能技术生成

效果1：跨页签一次性共享

登录后，其他页签不需要再登录，重启浏览器后需要重新登录
用Cookie，不设置过期时间（默认值-1）

效果2：跨页签长期共享

登录后，其他页签不需要再登录，重启浏览器后也不需要登录
用LocalStorage

效果3：只在当前页签有用

用SessionStorage

包达叔
关注
cookie、sessionStorage和localStorage的区别（详细）
微微的猪食小窝
11-13 1274
1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
localStorage,sessionStorage,cookie使用场景和区别
qq_46373615的博客
10-09 806
localStorage:H5新增在浏览器存储数据的方法 使用场景： 用来统计页面访问次数 sessionStorage：H5新增在浏览器存储数据的方法 使用场景：用来统计当前页面点击次数 cookie：在浏览器和服务器都可设置，传统的存储数据方法 使用场景：存储用户名和密码 三者区别 1、生存时间：cooke可以设置生存时间，默认为半个小时，sessionStorage是会话级的数据，浏览器窗口关闭即清楚，localSt...
sessionStorage、localStorage、cookie与indexDB应用
qq_38217940的博客
06-21 1159
介绍sessionStorage、localStorage、cookie与indexDB应用，以及他们在前端性能优化上的一些作用
前端必知必会的存储cookie,sessionStorage,localStorage的区别及应用场景
qq_43238599的博客
03-11 1203
前端有三种存储方式，分别是cookie sessionStorage localStorage 其中sessionStorage，localStorage是H5的新特性，这一点是要明白的。 cookie 特性 cookie的存储的比较小，大概只有4kb左右。它主要是为了与客户端交传递信息（存在headers请求头体）。每一次请求都会主动带上cookie的内容。如果在浏览器中设置了cooki...
sessionStorage不能跨标签页解决方案--vue项目
weixin_43837305的博客
09-23 8384
sessionStorage不能跨标签页解决方案–vue项目 现有的浏览器存储机制 localStorage ：~5MB，数据永久保存直到用户手动删除 sessionStorage ：~5MB，数据只在当前标签页有效 cookie ：~4KB，可以设置成永久有效 session cookie ：~4KB，当用户关闭浏览器时删除（并非总能立即删除） 安全的认证token保存 一些重要的系统会要求当用户关闭标签页时会话立刻到期。 为了达到这个目的，不仅绝对不应该使用cookies来保存任何敏感信息（例如认证to
阅读笔记：sessionStorage可以在多个标签页之间共享数据吗
最新发布
weixin_45853098的博客
12-07 1469
辨析localstorage，sessionStorage，cookie，session的概念
cookie、sessionStorage和localStorage的区别和使用
曹进的博客
07-12 3118
cookie、sessionStorage和localStorage的区别和使用
cookie、sessionStorage和localStorage的区别
aliyun3的博客
04-25 1433
一、 概念的理解 webstorage本地存储 1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage 2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信 3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（
sessionStorage 和 localStorage 的使用
webchang的博客
02-19 1万+
sessionStorage 和 localStorage的属性和方法，事件的触发
cookie、localStorage、sessionStorage三种客户端存储方式
jjjh968的博客
09-14 2338
cookie cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。 域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值对。 sessionStorage（会话存储） 同源策略： 不同于 Cookie， sessionStorage 访问限制更高，只有当前设定了 sessionStorage 的域下才能访问。单标签页： 两个相同域下的标签页不能互通。 即：在关闭标签页或者新开的标签页下都不能访问之前写下的 sessionS
sessionStorage跨页面通信
Little_fairy_lzx的博客
03-09 2687
sessionStorage在同一个页面中存储和取值是没有问题的,（这里的页面是同一个html文件）跨页面的话就会有问题比如浏览器导航栏的tab。 例如：页面a.html和页面b.html同时打开，这时在a.html中存储token，在页面b.html中是取不到的。 解决办法： 在页面a中打开页面b，并创建一个storage事件对象将a中要存储的值在b中存储。 function openWindow() { let newWindow = window.open('child.html','new
cookie、session、localStorage 和 sessionStorage 区别及应用场景
weixin_43190804的博客
02-23 4152
1.概念理解 Cookie它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 localStorage 是 HTML5 标准中新加入的技术，localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。 sessionStorage 与 localStorage 的接口类似，相较cookie一般存储大一些的数据，但保存数据的生命周期与
session,cookie,sessionStorage,localStorage的区别及应用场景
choupixiaolin的博客
10-26 1297
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。 一、cookie和session cookie和session都是用来跟踪浏览器用户身份的会话方式。 区别： 1、保持状态：cookie保存在浏览器端，session保存在服务器端 2、使用方式： （1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie
cookie，localStorage，SessionStorage三者应用场景
weixin_58195668的博客
05-28 827
一、cookie 1. cookie主要用于与服务器交互的存储，比如用户的登录信息，token令牌等。 2. 存储数据大小：限制在4kb左右。 3. 一般由服务器生成，可设置失效时间，一般都是页面关闭，或定时失效。 4. 存储数据类型：字符串类型的键值对。 二、localStorage 1. localStorage本地存储，不进行清理会永久保存。 2. 有三个方法：setItem、getItem和removeItem。localStorage.setItem("key", "value
sessionStorage多标签页共享
热门推荐
有问题 ! 请留言 !
01-18 1万+
sessionStorage多标签页共享 sessionStorage在不同页面上不是同步共享的，但是我们有时候会将token或者一些登录凭证记录在token里(你肯定要问为什么后端不把token直接写到cookie里，因为他懒…)，所以这里就写一下怎么将不同页面的sessionStorage同步更新 sessionStorage和localStorage区别 localStorage的生命周...
sessionStorage跨标签取值
果果的博客
04-03 5487
需求：当打开一个项目地址，写入sessionStorage之后，再打开一个tab页，取不到sessionStorage；why？怎么才能取到？ 答： ... 先看MDN文档 sessionStorage localStorage 通过开发者文档可以看出，localStorage可以跨标签，但是sessionStorage不可以跨标签，因为sessionStorage是基于会话级别...
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
weixin_33836874的博客
04-25 492
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。 一、cookie和session cookie和session都是用来跟踪浏览器用户身份的会话方式。 区别： 1、保持状态：cookie保存在浏览器端，session保存在服务器端 2、使用方式： （1）cookie机制：如果不在浏览器中设置过期时间，cookie被保...
Cookie、sessionStorage与localStorage详解
在Web开发中，为了实现用户状态管理，通常会使用cookie、sessionStorage和localStorage这三种技术。它们各自有其特点和适用场景。 一、Cookie Cookie是最早的Web存储方式，由服务器端设置并在客户端维护。它的主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值