# 浅析cookie、session、localStorage、sessionStorage之不同

# 基本概念

Cookie

  • Cookie顾名思义,小甜饼,小饼干的意思,它的小主要定义在数据大小限制为4KB左右,它的作用可谓是十分的强大了。Cookie是网站为了标识用户身份而存储在客户端的一个存储技术,同时它还能做用户的身份验证。

Session

  • Session翻译过来的意思是会话,它在前后端中的意思可以理解为数据的存储形式,它能够配合cookie实现用户身份的验证,而在本篇文章的后面提及到的sessionStroage,是一个前端概念,它可以将一部分数据在当前的会话窗口中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage中的数据会被清空的,可以理解为当前会话窗口已关闭。

# 聊一聊cookie和session的区别

cookie通常用于前后端进行身份验证的时候,标记用户的身份与众不同。说到cookie的作用,为什么要使用cookie,那就可能会说到http了,因为http是一种无状态的协议,无状态(大家可以理解为我上一秒登陆完网站,下一秒服务器再次收到访问网站请求的时候,它不认识你了,需要再次登陆,也可以说是不知道哪个客户端向服务器发送了请求)这就会导致一种情况出现:某个同学刚登陆完淘宝,跳转到购物车界面,加入完购物车的时候,需要再次登陆,想想这种用户体验真的是太差了~所以Cookie诞生了。

# Cookie的缺点

但是cookie不是很安全,因为别人可以分析存放在本地的cookie并进行恶意使用,自然而然我们想到了网站漏洞XSS攻击(跨站脚本攻击),它的原理:攻击者往web页面里插入恶意的脚本代码(css,js)当用户浏览该页面时,嵌入其中的脚本代码会执行,从而达到恶意攻击用户的目的,从而盗取cookie,破坏页面结构,这就需要我们在cookie字段中加入HttpOnly属性,保护好cookie,或者我们可以利用session,在服务器端用session去管理cookie

# session是什么哇

session是由cookie进行标记的,将cookie里的数据保存在服务器端,当需要记住用户时,比如前面说的登陆,在服务器端会设置一个响应头Set-Cookie,返回给客户端,例如:Set-Cooki:SESSIONID=654321;客户端接收到这个响应后,此后每次发送一个请求,浏览器都会自动带上Cookie请求头这个小饼干,小印记,对应内容则是Cookie:ESSIONID=654321,在服务器端存有session,以后每次客户端发送请求的时候都会与服务器端的session进行对比,如果对上了,就可以识别是哪个客户端发来的请求了。

# session的缺点

因为session在服务器端存储,会出现什么的情况呢?当一年一度的淘宝双11来临时,淘宝官网无疑会被大量访问,当同一个域名被大量访问时,一个域名下的众多服务器保存着同样的session,这样session所占的内存难以想象,这样会降低服务器的性能,考虑到服务器的性能优化

解决办法:
(1)共享session
将session提取出来,集中存放管理
(2)token令牌验证
客户端与服务器端的通信服务不需要存储,当进行通信交互时,可以通过解析token里面的信息来判断是否登陆。token里面可以携带cookie解析出来的信息,这样每次请求时添加一个token验证,就可以达到优化服务器性能的效果了。

# 安全性的考虑

需要注意的是,不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候,需要时刻注意是否有代码存在 XSS 注入的风险。

个人建议:

  • 像登陆注册这样的重要、敏感信息应当保存在session中
  • 其次临时需要信息可以存储在cookie中

# localStorage、sessionStorage的异同

特性
Cookie
LocalStorage
sessionStorage
数据的生命周期

一般由服务器端生成
可设置失效时间。如
果在浏览器生成,默认
是关闭浏览器之后失效

一旦存入,
除非清除,
否则永久保存

仅在当前会话有效,
关闭页面或浏览器后被清除

存放数据大小

4KB

一般为5MB

一般为5MB

与服务器端通信

每次都会携带在同源
的http请求头中,如果
使用cookie保存过多
数据会带来性能问题的

仅在客户端中保存
不参与服务器之间的通信

仅在客户端中保存
不参与服务器之间的通信

用途

服务器端生成,
用于标识用户身份

用于浏览器缓存数据

用于浏览器缓存数据


# localStorage、sessionStorage的操作方法

setItem存储value

用途:将value存储到key字段

{  sessionStorage.setItem("key", "value");       localStorage.setItem("site", "lsh");  }


getItem获取value

用途:获取指定key本地存储的值

{  var value = sessionStorage.getItem("key");      var site = localStorage.getItem("site");  }


removeItem删除key

用途:删除指定key本地存储的值

{  sessionStorage.removeItem("key");     localStorage.removeItem("site");  }


clear清除所有的key/value

用途:清除所有的key/value

{  sessionStorage.clear();     localStorage.clear();  }


# 出处: