资讯专栏INFORMATION COLUMN

Cookie、Session和LocalStorage

DesGemini / 3485人阅读

摘要:通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。使基于无状态的协议记录稳定的状态信息成为了可能。标记为的只应通过被协议加密过的请求发送给服务端。

前记

前面我已经写了一篇关于Cookie的文章,但是那时候我其实理解的并不是很深刻,会有些搞不懂的地方,今天我就再写一次,博客也是我的学习笔记

Cookie

Cookie是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie如何设置

Cookie的设置是在服务端来操作的,用户访问服务器,服务器响应中响应头带上

response.setHeader("Cookie", "Max-Age= ")//设置过期时间
Cookie的特性

Cookie的默认是随着用户关闭时过期,但是服务器可以设置Cookie的使用时间还有过期时间

Cookie可以设置HttpOnly来使用户不能通过JS来操作Cookie,HttpOnly类型的Cookie在一定程度上缓解XSS类攻击。

标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。

Cookie的缺陷

就像上面Cookie的特性中的2、3条说的,Cookie并不安全,因为Cookie如果包含着重要信息被人记录或者篡改,那就可以对用户的账户进行操作,所以为了改善这一个问题,就要用到接下来说的Session

Cookie总结

1、服务器通过Set-Cookie头给客户端一串字符串
2、客户端每次访问相同域名的网页时必须带上这段字符串
3、客户端要在一段时间内保存这个Cookie
4、Cookie默认在用户关闭时过期,后台可以设置Cookie存在时间
5、可以在控制台的Application中强制删除Cookie

Session

Session并不是HTTP协议中的一部分,Session是一个抽象的概念,是用来解决Cookie来标识用户而泄漏隐秘信息的一种方法,并且因为实现了中断和继续操作而叫‘会话’

Session的实现

服务器通过Cookie给用户一个SessionId

SessionId对应着服务器中的一小块内存,这块内存存着用户的隐秘信息

每次用户访问服务器的时候,服务期就通过SessionId去读取对应的内存,就知道了用户的隐秘信息

Session的缺陷

从上面可以看出,Session最大的缺陷就是占服务器的内存

Session的总结

1、将SessionId(一般就是一个随机数)通过Cookie发给客户端
2、客户端访问服务器时,服务器读取SessionId
3、服务器有一块内存(对象)保存了所有的Session
4、痛殴SessionId我们可以得到对应用户的隐私信息,如id,email
5、这块内存(哈希)就是服务器上的Session

Session不使用Cookie的实现方法

不写Cookie,将SessionId返回给JS,通过JSON返回给前端

前端拿到这个响应将其变成对象

将这个SessionId存到LocalStorage中

页面跳转登录后,将SessionId写到查询参数中,后台通过查询参数知道当前的SessionId

然后通过SessionId去Session中查找出用户的信息

Session和Cookie的区别

从上面的内容中就可以发现,Session和Cookie的区别很大
首先Cookie是HTTP协议中的一部分,而Session是一个抽象的概念
然后Session是存放在服务器的内存中,而Cookie是存放在本地
最后Session一般是依赖于Cookie的,SessionId是通过 Cookie 发送给客户端的

LocalStorage

LocalStorage是HTML5提供的新的API,LocalStorage也是一个哈希,是一个存在浏览器上的哈希

LocalStorage的使用方法

用户设置的使用方法

localStorage.setItem("a", "1")

用户如何获取存的对象

localStorage.getItem("a")

用户如何清理

localStorage.clear()
LocalStorage的总结

LocalStorage跟HTTP无关

只有相同域名的页面才能互相读取LocalStorage(没有同源那么严格)

每个域名的LocalStorage最大存储量为5M左右(由浏览器决定)

常用场景:记录有没有提示过用户(没有用的信息,不能记录密码)

LocalStorage存储的信息永远有效,除非用户清除

SessionStorage和LocalStorage的区别

1、2、3、4条同上,但是SessionStorage在用户关闭页面后就失效了

LocalStorage和Cookie的区别

从上面也可以看出

LocalStorage 不会随 HTTP 发给 Server

LocalStorage 的大小限制比 Cookie(4K) 大多了

LocalStorage存在的原因

由于历史遗留问题,以前所有信息都放到Cookie中,但是每次请求都要带上Cookie,因此会上传很多无用的东西,影响速度,因此作为一个前端不要读写Cookie

想说的话

正式学习前端已经快三个月了,一步步深入就总感觉自己学的不够,自己很垃圾,但是幸好我能感觉到我有东西可以学,所以,在没学完的那一刻,我是不会停下来的,加油

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108350.html

相关文章

  • Javascript本地存储小结

    摘要:不是很安全,别人可以分析存放在本地的并进行欺骗,考虑到安全应当使用。因此不是一种持久化的本地存储,仅仅是会话级别的存储。用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法。 人生如画,岁月如歌。 原文博客地址:Javascript本地存储小结 知乎专栏&&简书专题:前端...

    garfileo 评论0 收藏0
  • 浅谈cookiesessionlocalStoragesessionStorage的区别

    摘要:保持状态保存在浏览器端,保存在服务器端存储的大小单个保存的数据不能超过大小没有限制。的目的是克服由所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。的生命周期是仅在当前会话下有效。 写在前面 既然是浅谈,就不会详细从底层原理解释这几个的区别,就简单地聊一下,这几个的区别,优缺点,应用场景 cookie和session 浏览器的缓存机制提供了可以将用户数据存...

    frolc 评论0 收藏0
  • Cookie&SessionLocalStorage&SessionStorage

    摘要:那要是被删了呢那没办法了,只能重新登陆,意味着重新提交重新分配随机数。它是一个哈希,作用就是字面意思,本地存储,只不过这里的本地指的是浏览器。 标签可以保留回车和空格等你怎么写它就怎么展示的内容 cookie cookie可以看作是一种设置,允许浏览器在电脑本地硬盘的某一个隐蔽的地方开发一块存储空间,用来存放某些特定的内容。 如果在服务器端设置了允许使用cookie,那么,之后浏览器每...

    twohappy 评论0 收藏0
  • Cookie, Session, LocalStorage, SessionStorage, Eta

    摘要:理解进公园背景这个公园有一个总公园总公园里有许多小公园总公园是登录页面小公园是域名相同的页面第一次进总公园第一次请求某个服务器工作人员检查你的入园是否符合条件后端查看是否是注册以后的用户通过条件的话工作人员会给你一张票后端会给你一个响应头这 Cookie, Session, LocalStorage, SessionStorage Cookie 理解 进公园 背景: 这个公园有一个总公...

    imingyu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<