Cookie,sessionStorage,localStorage

Cookie

存储在用户本地终端上的数据,指某些网站为了辨别用户身份进行session跟踪而存储在本地终端上的数据,通常经过加密,一般应用最典型的案例就是判断注册用户是否已经登陆过该网站。

// 获取cookie值
function getCookie(key) {
    var arr1 = document.cookie.split('; ');
    for (var i = 0; i < arr1.length; i++) {
        var arr2 = arr1[i].split('=');
        if (arr2[0] == key) { return decodeURI(arr2[1]); }
    }
}
// 删除cookie
function removeCookie(key) {
    setCookie(key, '', -1);
}
// 存储cookie
function setCookie(key, value, t) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + t);
    document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
        // 注意 设置cookie一次只能存储一条
        // cookie可以多次设置 key相同不会重新赋值 而是会新建一条cookie
}
如何工作

当网页要发 http 请求时,浏览器会先检查是否有相应的 cookie,有则自动添加在 request header 中的 cookie 字段中。这些是浏览器自动帮我们做的,而且每一次 http 请求浏览器都会自动帮我们做。这个特点很重要,因为这关系到“什么样的数据适合存储在 cookie 中”。

存储在 cookie 中的数据,每次都会被浏览器自动放在 http 请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销;但如果这些数据是每个请求都需要发给服务端的数据(比如身份认证信息),浏览器这设置自动处理就大大免去了重复添加操作。所以对于那种设置“每次请求都要携带的信息(最典型的就是身份认证信息)”就特别适合放在 cookie 中,其他类型的数据就不适合了。

Cookie属性


name:为一个 cookie 的名称
value: (必须)一个键值对,用来指定 cookie 的值

document.cookie = 'userName=fengkaicahng';

expires/Max-Age :cookie超时时间。若设置其值为一个时间,那么当到达此时间后,此cookie失效。不设置的话默认值是Session,意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页,而是整个浏览器) 后,此cookie失效。

var day = new Date();
 day.setTime(day.getTime()+(1*24*60*60*1000));

// 设置一天的有效期
// 如果不设置; 默认时间是当前会话窗口关闭即失效

document.cookie = 'userName=fengkaicahng;expires="+day+"';

domain:指定发送 Cookie 的域名

 var day = new Date();
 day.setTime(day.getTime()+(1*24*60*60*1000));

//只有在该域名下才发送 cookie,
//如果不设置; 默认是设置 cookie 时的域名
//以下配置会在 fengkaichang.com 的所有子域名下生效

document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;

Size:此 cookie 大小
path:指定 Cookie 的路径

var day = new Date();
day.setTime(day.getTime()+(1*24*60*60*1000));

// 只有这个路径和发送到服务器的路径相同才发送cookie 可以直接配置/ 从根目录下匹配 这个匹配并不是绝对的,
// 如果不设置; 默认是请求该cookie时的路径
// 以下配置会在fengkaichang.com 的所有请求路径下生效
// 注意 path生效的前提是domain匹配成功,否则都是扯淡

document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;path=/'

secure:指定Cookie只能在加密协议HTTPS下发送到服务器

var day = new Date();
day.setTime(day.getTime()+(1*24*60*60*1000));

//这个属性的值是一个布尔值
//如果这个通信协议是HTTPS那么协议自动打开
//如果手动设置 一下配置不会在普通HTTP协议下发送

document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;path=/;secure=true'

http:cookie的httponly属性。若此属性为true,则只有在http请求头中会带有此cookie的信息,而不能通过document.cookie来访问此cookie。
secure:设置是否只能通过https来传递此条cookie

优点
  1. 可以设置 cookie 的有效时间;
  2. 通过加密和安全传输技术SSL,减少cookie被破解的可能性;
  3. 不需要任何服务器资源 ,Cookie 存储在客户端并在发送后由服务器读取;
  4. 简单:Cookie 是一种基于文本的轻量结构,包含简单的键值对。
缺点
  1. Cookie 的大小有4k的限制;
  2. 安全性问题:如果 cookie 被人拦截了,那人就可以取得所有的 session 信息。即使加密也与事无补,因为拦截者并不需要知道 cookie 的意义,他只要原样转发 cookie 就可以达到目的了;
  3. 有些用户禁用了浏览器或客户端设备接收 Cookie 的能力;
  4. 一个域名下存放的 cookie 的个数是有限制的,不同的浏览器存放的个数不一样,一般为50个。
cookie跨域问题

domain 表示的是 cookie 所在的域,默认为请求的地址,如网址为 www.jb51.net/test/test.aspx,那么 domain 默认为 www.jb51.net。而跨域访问,如域A为 t1.test.com,域B为 t2.test.com,那么在域A生产一个令域A和域B都能访问的 cookie 就要将该 cookie 的 domain 设置为 .test.com;如果要在域A生产一个令域A不能访问而域B能访问的 cookie 就要将该 cookie 的 domain 设置为 t2.test.com

解决cookie跨域问题之nginx反向代理

反向代理(Reverse Proxy)方式是指以代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器;并将从服务器上得到的结果返回给Internet上请求连接的客户端,此时代理服务器对外就表现为一个服务器。

反向代理服务器对于客户端而言它就像是原始服务器,并且客户端不需要进行任何特别的设置。客户端向反向代理 的命名空间(name-space)中的内容发送普通请求,接着反向代理将判断向何处(原始服务器)转交请求,并将获得的内容返回给客户端,就像这些内容 原本就是它自己的一样。

利用nginx的方向代理来解决cookie跨域问题,其实是通过“欺骗”浏览器来实现的,通过nginx,我们可以将不同工程的cookie放到nginx域下,通过nginx反向代理就可以取到不同工程写入的cookie。

H5提供了两种在客户端存储数据的新方法:sessionStorage和localStorage,两者都是仅在客户端(浏览器)中保存,不参与和服务器的通信

sessionStorage

用于本地存储一个会话(session)中的数据,针对一个session的数据存储,当用户关闭浏览器窗口后,数据会被删除。

localStorage

没有时间限制的数据存储,第二天,第二周或者下一年,数据依然可用。

localStorage本身带有方法有:

  1. 添加键值对:localStorage.setItem(key,value)
  2. 获取键值:
    localStorage.getItem(key)
  3. 删除键值对:localStorage.removeItem(key)
  4. 清除所有键值对:
    localStorage.clear()
  5. 获取localStorage的属性名称(键名称):
    localStorage.key(index)。
  6. 还有一个和普通对象不一样的属性length,获取localStorage中保存的键值对的数量:localStorage.length

三者的共同点

都是保存在浏览器端,且同源的(协议,域名,端口号都相同)

三者的区别

  1. cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递;cookie数据还有路径的概念,可以限制cookie只属于某个路径下;cookie数据不能超过4k,因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话的标识。
  2. sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存;它们的存储大小可以达到5M或者更大。
  3. cookie只在设置的时间之前有效,即使浏览器关闭也有效;sessionStorage仅在当前浏览器窗口关闭前有效;localStorage始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容