如果出现错误,请在评论中指出,我也好自己纠正自己的错误
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数据
复制代码