关于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的一种方式。

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

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

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

• 4、 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数据
复制代码