Cookie、Session、SessionStorage、LocalStorage 介绍

2,696 阅读11分钟

Cookie(4KB)(保存在客户端)

介绍

“Cookie”是小量信息,由网络服务器发送出来以存储在网络浏览器上,从而下次这位独一无二的访客又回到该网络服务器时,可从该浏览器读回此信息。

Cookie 是个存储在浏览器目录的文本文件,当浏览器运行时,存储在 RAM 中。一旦你从该网站或网络服务器退出,Cookie 也可存储在计算机的硬驱上。当访客结束其浏览器对话时,即终止的所有 Cookie。

为什么使用

标记用户状态

首先我们要知道一个概念,web程序是使用HTTP协议传输的,而HTTP协议是无状态的协议,对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

何时产生

客户端向服务器端发送一个请求的时,服务端向客户端发送一个Cookie 然后浏览器将Cookie保存,Cookie有两种保存方式,一种是浏览器会将CCookie保存在内存中,还有一种是保存在客户端的硬盘中,之后每次HTTP请求浏览器都会将Cookie发送给服务器端。

注意:浏览器可以禁用Cookie,同时服务端也可以不Set-Cookie。

Cookie生命周期

区分会话性cookie和持久性cookie:

会话性cookie不指定Expire值,存储在浏览器内存中,在浏览器关闭(会话结束)时会失效,数据被删除。

持久性cookie在创建的时候可以指定一个Expire值(毫秒),这就是Cookie的生存周期,在这个周期内Cookie有效,存储在磁盘中(cookie文件),超出周期Cookie(过期)就会失效,才会被删除数据。

备注:Cookie的生存周期设置为 负值 ,表示的是临时储存,不会写入cookie文件,只会存在浏览器内存中,且只会在打开的浏览器窗口或者子窗口有效,一旦浏览器关闭,cookie就会消失;Cookie的生存周期设置为 ‘0‘ ,表示在会话已经失效,失效的cookie会在浏览器关闭后被浏览器删除。

属性

属性以英文分号(;)分隔多个 image.png

缺点
  1. 数量受到限制。一个浏览器能创建的 Cookie 数量最多为 300 个,并且每个不能超过 4KB,每个 Web 站点能设置的 Cookie 总数不能超过 20 个

  2. 安全性无法得到保障。通常跨站点脚本攻击往往利用网站漏洞在网站页面中植入脚本代码或网站页面引用第三方法脚本代码,均存在跨站点脚本攻击的可能,在受到跨站点脚本攻击时,脚本指令将会读取当前站点的所有 Cookie 内容(已不存在 Cookie 作用域限制),然后通过某种方式将 Cookie 内容提交到指定的服务器(如:AJAX)。一旦 Cookie 落入攻击者手中,它将会重现其价值。

  3. 浏览器可以禁用Cookie,禁用Cookie后,也就无法享有Cookie带来的方便。

Session(大小无限制)(保存在服务端)

介绍

Session:在计算机中,尤其是在网络应用中,称为“会话控制”。Session 对象存储特定用户会话所需的属性及配置信息。这样,当用户在应用程序的 Web 页之间跳转时,存储在 Session 对象中的变量将不会丢失,而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web 页时,如果该用户还没有会话,则 Web 服务器将自动创建一个 Session 对象。当会话过期或被放弃后,服务器将终止该会话。

session是另一种记录客户状态的机制,不同的是Cookie保存在客户端浏览器中,而session保存在服务器上,客户端浏览器访问服务器的时候,服务器把客户端信息以某种形式记录在服务器上,这就是session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了;

为什么使用

安全性比Cookie高一点。

因为很多第三方可以获取到这个Cookie,服务器无法判断Cookie是不是真实用户发送的,所以Cookie可以伪造,伪造Cookie实现登录进行一些HTTP请求。如果从安全性上来讲,Session比Cookie安全性稍微高一些,我们先要知道一个概念--SessionID。SessionID是什么?客户端第一次请求服务器的时候,服务器会为客户端创建一个Session,并将通过特殊算法算出一个session的ID,下次请求资源时(Session未过期),浏览器会将sessionID(实质是Cookie)放置到请求头中,服务器接收到请求后就得到该请求的SessionID,服务器找到该id的session返还给请求者使用。

Session生命周期

根据需求设定,一般来说,半小时。举个例子,你登录一个服务器,服务器返回给你一个sessionID,登录成功之后的半小时之内没有对该服务器进行任何HTTP请求,半小时后你进行一次HTTP请求,会提示你重新登录。

缺陷

因为Session是存储在服务器当中的,所以Session过多,会对服务器产生压力。通过自动清除机制缓解服务器压力。lo

实现过程
  • 在服务器端生成全局唯一标识符session_id;
  • 在服务器内存里开辟此session_id对应的数据存储空间;
  • 将session_id作为全局唯一标示符通过cookie发送给客户端;
  • 以后客户端再次访问服务器时会把session_id通过请求头中的cookie发送给服务器;
  • 服务器再通过session_id把此标识符在服务器端的数据取出
  • 如果客户端的浏览器禁用了 Cookie 怎么办?一般这种情况下,会使用一种叫做URL重写的技术来进行会话跟踪,即每次HTTP交互,URL后面都会被附加上
属性

image.png

SessionStorage(5MB或更大)(保存客户端)

介绍

sessionStorage 属性允许你访问一个,对应当前源的 session Storage 对象。

它与 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据 在页面会话结束时会被清除

注意:存储在sessionStorage或localStorage中的数据特定于页面的协议。也就 是说example.comexample.com的sessionStorage相互隔离。

生命周期
  • 页面会话在浏览器打开期间一直保持,并且 重新加载恢复页面 仍会保持原来的页面会话(恢复数据)。
  • 新标签或窗口打开一个页面(从项目跳转新开一个页面) 时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookies 的运行方式不同。
  • 打开多个相同的URL的Tabs页面,会创建 各自的sessionStorage(多开同一项目,不会共享sessionStorage)。
  • 关闭对应浏览器窗口(Window)/ tab,会清除对应的sessionStorage。

适合:解决项目支持多开导致共享数据引发的问题

使用

全局对象 - sessionStorage

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
  • 设置storage sessionSTorage.setItem(key, value)
  • 读取storage sessionSTorage.getItem(key)
  • 删除指定storage sessionSTorage.removeItem(key)
  • 删除所有storage sessionSTorage.clear()

注意:对于对象、整数key值会自动转换成字符串形式。

LocalStorage(5MB或更大)(保存客户端)

介绍

只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;

存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留,关闭浏览器/标签页时,数据仍然存在。

使用

全局对象 - localStorage

// 设置数据
localStorage.setItem('myCat', 'Tom');
// 读取数据
let cat = localStorage.getItem('myCat');
// 移除指定数据
localStorage.removeItem('myCat');
// 移除所有
localStorage.clear();
  • 设置数据 localStorage.setItem(key, value)
  • 读取数据 localStorage.getItem(key)
  • 移除指定数据 localStorage.removeItem(key)
  • 移除所有 localStorage.clear()

注意:localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型

Cookie 和 Session 比较

  1. 保持状态

    • cookie保存在浏览器端
    • session保存在服务器端
  2. 使用方式

    • cookie机制: 如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间,cookie被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期时间结束才消失。

    • session机制: 当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含sessionid。如果有sessionid,服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid,服务器会创建新的session对象,并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端,在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie,则要使用URL重写,可以通过response.encodeURL(url) 进行实现;API对encodeURL的结束为,当浏览器支持Cookie时,url不做任何处理;当浏览器不支持Cookie的时候,将会重写URL将SessionID拼接到访问地址后。

  3. 存储内容

    • cookie只能保存字符串类型,以文本的方式
    • session通过类似与Hashtable的数据结构来保存,能支持任何类型的对象(session中可含有多个对象)
  4. 存储的大小

    • cookie:单个cookie保存的数据不能超过4kb;
    • session大小没有限制。
  5. 安全性

    • cookie:针对cookie所存在的攻击:Cookie欺骗,Cookie截获;
    • session的安全性大于cookie。
  6. 应用场景

    • Cookie:

      • 判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。
      • 保存上次登录的时间等信息。
      • 保存上次查看的页面
      • 浏览计数
    • Session:

      • 网上商城中的购物车
      • 保存用户登录信息
      • 将某些数据放入session中,供同一用户的不同页面使用
      • 防止用户非法登录

localStorage 和 sessionStorage 比较

  1. 生命周期:
    • localStorage 生命周期是永久的,需要手动清除;
    • sessionStorage 生命周期是在仅在当前会话下有效,关闭浏览器/标签页会自动清除

Cookie 和 WebStorage(local/session) 比较

  1. 生命周期:

    • localStorage:

    localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。

    • sessionStorage:

    sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。

  2. 存储大小:

    • localStorage和sessionStorage的存储数据大小一般都是:5MB 或者更大
  3. 存储位置:

    • localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信。
  4. 存储内容:

    • localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
  5. 获取方式:l

    • localStorage:window.localStorage:Object;
    • sessionStorage: window.sessionStorage:Object
    • cookie: document.cookie:String

WebStorage 优点

  1. 存储空间更大:cookie为4KB,而WebStorage是5MB;
  2. 节省网络流量:WebStorage不会传送到服务器,存储在本地的数据可以直接获取,也不会像cookie一样美词请求都会传送到服务器,所以减少了客户端和服务器端的交互,节省了网络流量;
  3. 对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据,sessionStorage会非常方便;
  4. 快速显示:有的数据存储在WebStorage上,再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多,所以速度更快;
  5. 安全性:WebStorage不会随着HTTP header发送到服务器端,所以安全性相对于cookie来说比较高一些,不会担心截获,但是仍然存在伪造问题;
  6. 使用便捷:WebStorage提供了一些方法,数据操作比cookie方便;