一文理解 cookie、localStorage、sessionStorage、session

时间 2019-11-17

标签一文理解 cookie localstorage sessionstorage session 栏目 HTML 繁體版

原文原文链接

简介

在之前常常用到的cookie、session，但在H5中新引入了新的浏览器本地缓存方案。由于你们使用的不太规范用来做为本地储存工具，在下次请求时会默认带上cookie中的数据致使浪费性能和流量。javascript

下面就从开始介绍为何产生的cookie，它的出现是为了解决什么问题，它有什么问题；后面localStorage是为何产生，它又解决了那部分的问题。最后是cookie、session、localStorage、sessionStorage之间的对比。php

cookie

首先了解为何会产生cookie?cookie是什么?html

cookie是什么、cookie产生缘由

在HTTP请求创建链接时，有一个客户端、服务端它们两个之间创建的链接。可是HTTP协议每次创建链接都是独立，也能够说是HTTP协议是无状态的链接。java

第一次创建链接，客户在客户端中登陆，服务端验证登陆信息，生成Token为之后的请求不须要重新登陆
第二次创建链接，客户端携带服务端在登陆成功时返回的Token，可是这个Token要储存在哪里？通常会存在cookie里。

简单总结一下就是，由于HTTP协议是无状态的因此客户端须要一个cookie来储存起来。web

HTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。面试

Cookie主要用于如下三个方面：数据库

会话状态管理（如用户登陆状态、购物车、游戏分数或其它须要记录的信息）
个性化设置（如用户自定义设置、主题等）
浏览器行为跟踪（如跟踪分析用户行为等）

建立Cookie

当服务器收到HTTP请求时，服务器能够在响应头里面添加一个Set-Cookie选项。浏览器收到响应后一般会保存下Cookie，以后对该服务器每一次请求中都经过Cookie请求头部将Cookie信息发送给服务器。编程

在建立Cookie是能够设置不少属性，如Expires、Max-Age、Domain、Path、Secure、HttpOnly，由于它会自动携带到服务器端，同时又支持服务器端设置。因此有不少的方面要注意，好比时效性、做用域、安全性。下面就从这三个方面来解释他属性的做用。跨域

时效性

若是在Set-Cookie时不经过Expries、Max-Age两个字段设置Cookie的时效性，那么这个Cookie是一个简单的会话期Cookie。它在关闭浏览器是会被自动删除。浏览器

若是设置了Expries、Max-Age那么这个Cookie在指定时间内都是有效的。

提示：当Cookie的过时时间被设定时，设定的日期和时间只与客户端相关，而不是服务端。

做用域

Domain 和 Path 标识定义了Cookie的做用域：即Cookie应该发送给哪些URL。

Domain 标识指定了哪些主机能够接受Cookie。若是不指定，默认为当前文档的主机（不包含子域名）。若是指定了Domain，则通常包含子域名。

Path 标识指定了主机下的哪些路径能够接受Cookie（该URL路径必须存在于请求URL中）。以字符 %x2F ("/") 做为路径分隔符，子路径也会被匹配。

安全性

标记为 Secure 的Cookie只应经过被HTTPS协议加密过的请求发送给服务端。但即使设置了 Secure 标记，敏感信息也不该该经过Cookie传输，由于Cookie有其固有的不安全性，Secure 标记也没法提供确实的安全保障。

从 Chrome 52 和 Firefox 52 开始，不安全的站点（http:）没法使用Cookie的 Secure 标记。

为避免跨域脚本 (XSS) 攻击，经过JavaScript的 Document.cookie API没法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端。

客户端操做Cookie

经过Document.cookie属性可建立新的Cookie，也可经过该属性访问非HttpOnly标记的Cookie。

documnet.cookie
  // 这里就很少作赘述，有一篇文章专门讲解了
复制代码

cookie的特色

优势

储存用户信息（用户token）
标记用户行为（uuid、埋点）

弊端

Cookie会被附加在每一个HTTP请求中，因此无形中增长了流量
Cookie可能被禁用。当用户很是注重我的隐私保护时，他极可能禁用浏览器的Cookie功能；
因为在HTTP请求中的Cookie是明文传递的，潜在的安全风险，Cookie 可能会被篡改
Cookie数量和长度的限制。每一个域名(Domain)下 IE6或IE6-(IE6如下版本)：最多20个cookie IE7或IE7+(IE7以上版本)：最多50个cookie FF:最多50个cookie Opera:最多30个cookie Chrome和safari没有硬性限制 当超过单个域名限制以后，再设置cookie，浏览器就会清除之前设置的cookie。IE和Opera会清理近期最少使用的cookie，FF会随机清理cookie；
每一个Cookie长度不能超过4KB

cookie安全问题

Cookie面临什么样的安全问题，常见的xss、csrf等等下面开始。

xss 和防护xss

若是在服务器端Set-Cookie时没有设置HttpOnly=true时，在浏览器端就能够经过document.cookie来读取和修改Cookie中的值，这是十分安全的会形成xss。当Cookie中有关键性信息是要设置HttpOnly=true。

防止中间人劫持和中间人劫持

大体的分布图是：

DNS
     <----->
用户          中间人       外网
     <----->
       HTTP
复制代码

当使用HTTPS协议和购买正规的CA证书时，即便中间人劫持也没法解密。而且在Set-Cookie设置Secure=true时Cookie只应经过被HTTPS协议加密过的请求发送给服务端。

csrf 和 csrf防护

CSRF: 跨站请求伪造（CSRF）是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。

例如，这些非预期请求多是经过在跳转连接后的 URL 中加入恶意参数来完成:

<img src="https://www.example.com/index.php?action=delete&id=123">
复制代码

对于在 https://www.example.com 有权限的用户，这个 <img> 标签会在他们根本注意不到的状况下对 https://www.example.com 执行这个操做，即便这个标签根本不在 https://www.example.com 内亦可。

SameSite Cookie容许服务器要求某个cookie在跨站请求时不会被发送，从而能够阻止跨站请求伪造攻击（CSRF）。但目前SameSite Cookie还处于实验阶段，并非全部浏览器都支持。

strict：浏览器在任何跨域请求中都不会携带Cookie，这样能够有效的防护CSRF攻击，可是对于有多个子域名的网站采用主域名存储用户登陆信息的场景，每一个子域名都须要用户从新登陆，形成用户体验很是的差。
lax：相比较strict，它容许从三方网站跳转过来的时候使用Cookie。

其余防护

设置cookie有效期时间
防止cookie是明文，服务器端生成密钥验证
生成随机数和cookie发送给服务器端
flash编程安全，审核flash代码，尽可能不要用flash用最新的视频vedio + https + socket或者动画

到此cookie的产生缘由、做用、特色/缺点、安全问题。

Session

session是什么？ Session是一种记录客户状态的机制，不一样于Cookie的是Cookie保存在客户端浏览器中，而Session保存在服务器上。避免了在客户端Cookie中存储敏感数据。

Session机制

Session从字面意思上能够理解为会话，谁与谁的会话呢？实际上是客户端浏览器与服务器之间一系列交互的动做称为一个 Session。

建立Session（java）

Session在服务器端程序运行的过程当中建立的，不一样语言实现的应用程序有不一样建立Session的方法，在Java中是经过调用HttpServletRequest的getSession方法(使用true做为参数)建立的。建立Session的同时，服务器会为该Session生成惟一的session id，这个session id在随后的请求中会被用来从新得到已经建立的Session。
Session被建立以后，就能够调用Session相关的方法往Session中增长内容了，而这些内容只会保存在服务器中，发到客户端的只有session id
当客户端再次发送请求的时候，会将这个session id带上，服务器接受到请求以后就会依据session id找到相应的Session，从而再次使用Session。

Session的生命周期

Session保存在服务器端。为了得到更高的存取速度，服务器通常把Session放在内存中。每一个用户都会有一个独立的Session。若是Session内容过于复杂，当大量客户访问服务器时可能会致使内存溢出。所以，Session里的信息应该尽可能精简。

Session在用户第一次访问服务器的时候自动建立。须要注意只有访问JSP、Servlet等程序时才会建立Session，只访问HTML、IMAGE等静态资源并不会建立Session。若是还没有生成Session，也可使用request.getSession(true)强制生成Session。

Session生成后，只要用户继续访问，服务器就会更新Session的最后访问时间，并维护该Session。用户每访问服务器一次，不管是否读写Session，服务器都认为该用户的Session"活跃(active)"了一次。

Session的有效期

因为会有愈来愈多的用户访问服务器，所以Session也会愈来愈多。为防止内存溢出，服务器会把长时间内没有活跃的Session从内存删除。这个时间就是Session的超时时间。若是超过了超时时间没访问过服务器，Session就自动失效了。

Session的超时时间为maxInactiveInterval属性，能够经过对应的getMaxInactiveInterval()获取，经过setMaxInactiveInterval(longinterval)修改。

Session的超时时间也能够在web.xml中修改。另外，经过调用Session的invalidate()方法可使Session失效。

三种方法让Session失效：

服务器意外关闭。（服务器正常关闭时session是会被服务器保存在服务器的 session.ser 文件中（在work文件夹下））
session自杀：调用session.invalidate()方法能够当即杀死session；
能够在服务器下的web.xml文件中的 <session-timeout> 30 </session-timeout> 修改这是默认值(默认30分钟)，是以分为单位。

浏览器关闭session会失效?

在几年前看不少网上的资料时有的会说session会在浏览器关闭时会失效。为何会失效？怎么能让它不失效？

为何会失效？

下面梳理一下session为何会在浏览器关闭时失效，其实这样说并不许确：

在服务器端生成session，而且把sessionid经过set-cookie发送给浏览器
之后每次请求除了图片、静态文件请求，其它的请求都会带上服务端写入浏览器中cookie
服务端接收到sessionid，经过sessionid找到对应的session信息
当浏览器关闭时，当前域名中设置的cookie会被清空
再下次请求使，服务端接收到的session为null，服务端就会认为当前用户是一个新的用户，从新登陆或者直接设置新的sessionid

上面也就是为何会说session会在浏览器关闭时会失效。

怎么能让它不失效？

在Set-Cookie时设置Expries或Max-Age，其实就是设置Cookie的失效时间。或者直接把Sessionid储存在本地。

web Storage

Web Storage API提供机制，使浏览器能以一种比使用Cookie更直观的方式存储键/值对。

Web Storage 包含以下两种机制：

sessionStorage 为每个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面从新加载和恢复）。
localStorage 一样的功能，可是在浏览器关闭，而后从新打开后数据仍然存在。

应注意，不管数据存储在 localStorage 仍是 sessionStorage ，它们都特定于页面的协议。

localStorage

只读的localStorage 属性容许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。存储在 localStorage 的数据能够长期保留。

sessionStorage

sessionStorage 属性容许你访问一个 session Storage 对象。存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，而且从新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，这点和 session cookies 的运行方式不一样。

localStorage和sessionStorage区别

存储在 localStorage 的数据能够长期保留，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

总结

session和cookie的区别：

session储存在服务端，cookie储存在客户端
session比cookie更安全，由于session储存在服务端
session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据能够保存在集群、数据库、文件中。
cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现session的一种方式。

web storage和cookie的区别：

web storages和cookie的做用不一样，web storage是用于本地大容量存储数据(web storage的存储量大到5MB);而cookie是用于客户端和服务端间的信息传递；
web storage有setItem、getItem、removeItem、clear等方法，cookie须要咱们本身来封装setCookie、getCookie、removeCookie

参考

HTTP cookies

Web Storage API

Window.localStorage

Window.sessionStorage

这一次把cookie给你说透彻！

深刻理解Session和Cookie的区别

详解cookie和session的运做机制（上篇）

面试稳了！这才是cookie，session与token的真正区别