关于Cookie、session和Web Storage

一边学习前端，一边经过博客的形式本身总结一些东西，固然也但愿帮助一些和我同样开始学前端的小伙伴。

若是出现错误，请在评论中指出，我也好本身纠正本身的错误

author： thomaszhou

• cookie和session的区别

  • cookie数据存放在客户的浏览器上，session数据放在服务器上
  • cookie不是很安全，别人能够分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。用户验证这种场合通常会用 session
  • session保存在服务器，客户端不知道其中的信息；反之，cookie保存在客户端，服务器可以知道其中的信息
  • session会在必定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
  • session中保存的是对象，cookie中保存的是字符串
  • session不能区分路径，同一个用户在访问一个网站期间，全部的session在任何一个地方均可以访问到，而cookie中若是设置了路径参数，那么同一个网站中不一样路径下的cookie互相是访问不到的

• 深刻理解session和cookie的关系

Session: 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据能够保存在集群、数据库、文件中；

Cookie: 是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。

• 一、 因为HTTP协议是无状态的协议，因此服务端须要记录用户的状态时，就须要用某种机制来识具体的用户，这个机制就是Session.典型的场景好比购物车，当你点击下单按钮时，因为HTTP协议无状态，因此并不知道是哪一个用户操做的，因此服务端要为特定的用户建立了特定的Session，用用于标识这个用户，而且跟踪用户，这样才知道购物车里面有几本书。这个Session是保存在服务端的，有一个惟一标识。在服务端保存Session的方法不少，内存、数据库、文件都有。集群的时候也要考虑Session的转移，在大型的网站，通常会有专门的Session服务器集群，用来保存用户会话，这个时候 Session 信息都是放在内存的，使用一些缓存服务好比Memcached之类的来放 Session。
• 二、 思考一下服务端如何识别特定的客户?: 这个时候Cookie就登场了。每次HTTP请求的时候，客户端都会发送相应的Cookie信息到服务端。实际上大多数的应用都是用 Cookie来实现Session跟踪的，第一次建立Session的时候，服务端会在HTTP协议中告诉客户端，须要在 Cookie 里面记录一个Session ID，之后每次请求把这个会话ID发送到服务器，我就知道你是谁了。

session 的运行依赖 session id，而 session id 是存在 cookie中的

• 三、有人问，若是客户端的浏览器禁用了 Cookie怎么办？通常这种状况下，会使用一种叫作URL重写的技术来进行会话跟踪，(在 url 中传递 session_id)即每次HTTP交互，URL后面都会被附加上一个诸如 sid=xxxxx 这样的参数，服务端据此来识别用户。

• 四、 Cookie有个很经常使用的场景就是自动填上用户名和密码

原本 session 是一个抽象概念，开发者为了实现中断和继续等操做，将 user agent 和 server 之间一对一的交互，抽象为“会话”，进而衍生出“会话状态”，也就是 session 的概念。

而 cookie 是一个实际存在的东西，http 协议中定义在 header 中的字段。能够认为是 session 的一种后端无状态实现。

而咱们今天常说的 “session”，是为了绕开 cookie 的各类限制，一般借助 cookie 自己和后端存储实现的，一种更高级的会话状态实现。

因此 cookie 和 session，你能够认为是同一层次的概念，也能够认为是不一样层次的概念。具体到实现，session 由于 session id 的存在，一般要借助 cookie 实现，但这并不是必要，只能说是通用性较好的一种实现方案。

• localStorage，sessionStorage和cookie的区别

共同点：都是保存在浏览器端、且同源的

• 数据存储方面
  • cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下
  • sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。
• 存储数据大小
  • 存储大小限制也不一样，cookie数据不能超过4K，同时由于每次http请求都会携带cookie、因此cookie只适合保存很小的数据，如会话标识。
  • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大
• 数据存储有效期
  • sessionStorage：仅在当前浏览器窗口关闭以前有效；
  • localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，所以用做持久数据；
  • cookie：只在设置的cookie过时时间以前有效，即便窗口关闭或浏览器关闭
• 做用域不一样
  • sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；
  • localstorage在全部同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在
  • cookie: 也是在全部同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

Web Storage拥有setItem、getItem、removeItem、clear等方法，不像cookie须要本身封装setCookie、getCookie等方法

• sessionStorage与页面js数据对象的区别

页面中通常的js对象的生存期仅在当前页面有效，所以刷新页面或转到另外一页面这样的从新加载页面的状况，数据就不存在了()

而sessionStorage只要同源的同学口中，刷新页面或进入同源的不一样页面，数据始终存在，也就是说只要浏览器不关闭，数据仍然存在()

cookie使用方法介绍

cookie能够写好封装，也可直接用已经写好的框架这里推荐一个吧‘jquery.cookies.2.2.0.min.js’；注意还有有一个是cookie.js的也能够，我的以为没有“jquery.cookies.2.2.0.min.js”好用。

先说一下，JavaScript原生的用法。

Cookie 以名/值对形式存储 例如username=John Doe，这里的数据是string类型，如要是其余格式注意进行格式转换。

JavaScript 可使用 document.cookie 属性来建立 、读取、及删除 cookie。JavaScript 中，建立 cookie 以下所示：

document.cookie="username=John Doe";
复制代码

您还能够为 cookie 添加一个过时时间（以 UTC 或 GMT 时间）。默认状况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
复制代码

您可使用 path 参数告诉浏览器 cookie 的路径。默认状况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
复制代码

设置cookie

function setCookie(cname,cvalue,exdays)
{
  var SetTime = new Date();                                         //设置过时时间
  SetTime.setTime(SetTime.getTime()+(exdays*24*60*60*1000));        //设置过时时间
  var expires = "expires="+SetTime.toGMTString();                   //设置过时时间
  document.cookie = cname + "=" + cvalue + "; " + expires;          //建立一个cookie
}
复制代码

读取cookie

function getCookie(c_name)
{
if (document.cookie.length>0) 
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}
复制代码

删除cookie

将cookie的有效时间改为昨天。

使用jquery.cookies.2.2.0.min.js插件

添加/修改cookie并设定过时时间：

`$.cookies.set('cookie_id', 'cookie_value', { hoursToLive: 10 });
复制代码

这里设置的是过时时间是10小时, 还能够这样设置过时时间：

expireDate = new Date();

expireDate.setTime( expireDate.getTime() + ( 10 * 60 * 60 * 1000 ) );

$.cookies.set('cookie_id', 'cookie_value', {expiresAt:expireDate});
复制代码

获取cookie

$.cookies.get('cookie_id');
复制代码

删除cookie

$.cookies.del('cookie_id');
复制代码

SessionStorage 和 localStorage用法

H5对于web storage的支持很友好，使用方法很简单

• setItem()

sessionStorage.setItem(keyName,value);   // 将value存储到key字段中
//或者
sessionStorage.keyName='value';
eg：sessionStorage.setItem("name","thomas");

localStorage.getItem(keyName);          //获取指定key的本地存储的值
//或者
var keyName=localStorage.key;
eg:sessionStorage.getItem("name");
复制代码

下面我只列举sessionStorage方法。

其余的方法基本同上，只是将前缀sessionStorage改为localStorage便可

• getItem()

sessionStorage.getItem(keyName);          //获取指定key的本地存储的值
//或者
var keyName=sessionStorage.key;
eg: sessionStorage.getItem("name");
复制代码

• removeItem()

sessionStorage.removeItem(keyName);     // 删除指定ke的本地存储的值
eg: sesisonStorage.removeItem("name");
复制代码

• clear()

sessionStorage.clear()      //清除全部localStorage数据
复制代码