cookie
打开控制台,找application,如图application是应用缓存,不用深究。
Storage是本地存储的意思。
里面用的比较多的就是cookie和localStorage。
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,发现又有了。
从哪来的呢?
向服务器发送请求,按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。
举个例子——打开百度:
但是它的很多资源,比如图片的地址不是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实现了识别用户身份了。