cookie&session&localStorage

cookie

打开控制台,找application,如图

application是应用缓存,不用深究。
Storage是本地存储的意思。
里面用的比较多的就是cookie和localStorage。

选中cookies,如图

cookie里的数据内容有name,value,domain,path,expire,size,http,,,,,,
path表示cookie影响的路径,匹配到这个路径才能发这个cookie。

cookie的作用就是把一些信息,记录下来,存储在我们当前的页面下,对应的name&value,Domain表示当前的cookie是在哪个域下是生效的,不能乱写的。Path,是cookie生效后面是不是还有一些后缀。
Expires和maxAge是过期时间,过了生效时间,cookie会自动消失。不设这两个值,会产生session cookie,当用户关闭浏览器,这个东西就被清除了。
secure,值是true,cookie在HTTP无效,在HTTPS有的。
字段里有httpOnly,cookie不能被JS修改,避免xss的攻击。只能服务器端修改Set-Cookie修改了。
cookie是当前域名下存的一点点数据,不能超过4k大小。
cookie存的也只能是字符串。
cookie记录某些页面刷新或关闭后仍需要记录的数据,控制台用document.cookie可以直接看。可以在服务器端用HTTP协议的set-cookie让浏览器种下cookie,最常见的方法。

举个例子:打开百度,看cookie如何产生——

如图

点clear,如图

都清掉了。
再刷新下页面,再打开cookie,发现又有了。
从哪来的呢?

打开Network看看里的header:

向服务器发送请求,按HTTP协议发送的请求内容,就是Request URL。发完后,服务器给出响应。响应头的数据就是Response Headers的数据。这里面有几个个Set-Cookie,响应到了浏览器后,浏览器看到了Set-Cookie字段了,就把这些东西种到当前的cookie下。
如果已经有了cookie的数据了,再刷新,Response Headers里的Set-Cookie就少很多了,或者没有了,已经有了的就不用再设进去了。

cookie 有什么用呢?任何时候发的请求,这时候看Request Headers里的Cookie的一串数据了吧,只要你向现在这个域名下发任何请求,请求就会带它的Cookie。所以cookie太多,影响传输。服务器会Set-Cookie到浏览器下,浏览器会把cookie带上,发给服务器。
作用:
记录用户名。用JS设置cookie数据,下次刷新页面,再读取cookie,获取里面的值,展示到页面上,用户名有了。用的比较多的是购物车,购物车东西有了,下线,再登陆还在购物车里。购物车信息存储在cookie上或local Storage。

请求头就是Request Headers那些数据

举个例子——打开百度:
但是它的很多资源,比如图片的地址不是baidu.com的域名,因为很多静态资源是用不到cookie的。如果这些静态资源也用baidu.com的域名,它们也要用到cookie了,这就是无所谓的开销了。怎么办?把静态资源换个域名,当然换域名应该还有其他原因的,这时候请求这个资源,就不带cookie了,因为生效域名限制了。
还有一个功能跟session相关的。

local Storage

如图

key&value
valuue存储的只能是字符串啊。我们也可以把数据存在local Storage里,存储量可以到5兆更多。但是它只有key和value,没有生效时间,永远存在,关掉浏览器也存在,也没有作用域。
这时候就可以试着应用这些数据了:

localStorage['name']='haha'
//这时候,存储里就有了name,haha。
localStorage['name']
//'haha'  而且一直存在跟页面的刷新关闭没关系。
loccalStorage['name']={a:1,b:2}    //不是字符串啊咋办?
存储结果:[object,Object],先转换成字符串,数据丢了。
只能先把对象转化成字符串了:
localStorage['name']=JSON.stringify{a:1,b:2}
用的时候再转回去:
JSON.parth(localStorage['name'])

它就是存东西的作用,比如不联网的百度地图,先从本地的local Storage里拿,没有的再发网络请求。
内存大,永不消失,除非用JS删了。不参与网络传输,一般用于性能优化。
小封装题,看看就行,因为看不懂靠,试着解析下:

使用 localStorage封装一个 Storage 对象,达到如下效果

Storage.set('name', '饥人谷') 
Storage.set('age', 2, 30) ;  //设置 name 字段存储的值为'饥人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'],  60)

Storage.get('name')   // ‘饥人谷’
Storage.get('age')     //  如果不超过30秒,返回数字类型的2;如果超过30秒,返回 undefined,并且 localStorage 里清除 age 字段
Storage.get('teachers')  //如果不超过60秒,返回数组; 如果超过60秒,返
var Storage = (function(){
  return {
    set: function(key, value, expireSeconds){
      localStorage[key] = JSON.stringify({
        value: value, 
        expired: expireSeconds===undefined?undefined:Date.now() + 1000*expireSeconds
      })
    },    
//方法set是设值并存到local Storage,所以有 localStorage[key] =。
//三个参数,必须存储格式是字符串,所以转字符串.
//第三个是时间参数,没有设就返回undefined,有就记录当下毫秒数。
    get: function(key){
      if(localStorage[key] === undefined){
        return
      }
//如果没有存储key值,不返回。

      var o = JSON.parse(localStorage[key])      //从字符串转回对象。
//时间的值没有或者现在的毫秒数小于刚才执行set时的毫秒数加第三个参数的1000倍的和
//返回其值否则删掉。我靠,,,,,,能明白了,,,
      if(o.expired === undefined || Date.now() < o.expired){
        return o.value
      }else{
        delete localStorage[key]
      }
    }
 }
})()

session

用户登录淘宝了,刷新了下,还是登录状态,服务器如何判断这次发起请求的用户是刚才登录过的呢?
一开始没登陆,向服务器发请求,服务器看到请求里没cookie,表示没登陆,服务器这时候在自己内存里创建了一个对象,生成随机id,对象包含id,这个对象可以说是session了。然后session有个id ,服务器返回页面时,给响应头加了句话:Set-Cookie,把id给set上,这时候用户打开淘宝网站,就有了cookie。再刷新页面时,请求带了cookie,请求发到服务器后,服务器的那个对象还存在着,根据发过来的id跟session匹配,匹配上了,就知道是这个对象,对象对应的是个人信息的用户名,头像,信息,,,,,在渲染页面时,直接把信息加上了。session是服务器的一个对象,也可以是一种机制,结合cookie实现了识别用户身份了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容