Cookie
Cookie 是浏览器访问服务器后,服务器传给浏览器的一段数据。
服务器通过 Set-Cookie 头给客户端一串字符串
客户端每次访问相同域名的网页时,必须带上这段字符串
客户端要在一段时间内保存这个Cookie
Cookie 默认在用户关闭页面后就失效,后台代码可以任意设置 Cookie 的过期时间
Cookie的用途
1.识别用户身份
比如:zink访问test.com,test.com的服务器为zink设置Cookie:userId='zink',此后zink每次访问test.com的其他页面是,都会带上这个Cookie。同理,jack访问test.com,test.com为jack设置Cookie:userId='jack',此后jack访问test.com的其他页面时,都会带上这个Cookie,这样,test.com的服务器就能区分出zink和jack两名用户了。
2.记录历史
例如:当用户浏览一个购物网战时,用户将商品添加到购物车,此时JS改写Cookie,将商品追加到其中并发送到服务器,当用户访问这个购物网站的其他页面时,带上这段Cookie,其他页面也知道购物车里有什么商品。
问题:
- 我在Chrome登陆了得到了Cookie,用Safari 访问,Safari会带上 Cookie 吗?
答:NO - Cookie存在哪?
Windows 存在C盘的文件里 - Cookie能作假吗?
能 - Cookie有有效期吗?
有,默认有效期20分钟左右,后端可以强制设置有效期
Session
什么是Session?
1.将SessionId(随机数)通过cookie发给客户端
2.客户端访问服务器时,服务器都去SessionId
3.服务器有一块内存(对象)把偶你了所有Session
4.通过SessionId我们可以得到对应用户的隐私信息,如id。email
5.这块内存(哈希表)就是服务器上的所有Session
LocalStorage
LocalStorage是HTML5提供的API
本质是一个hash
LocalStorage.setItem(name, value)
LocalStorage.GetItem(name)
LocalStorage.clear()
这三个API的作用都是操作当前页面的hash
使用LocalStorage
存在C盘的一个文件里,可以做到持续化存储
1.LocalStorage 与 HTTP 无关
2.HTTP不会带上LocalStorage的值
3.只有相同域名的页面才能互相读取 LocalStorage(没有同源那么严格)
4.每个域名 LocalStorage 最大存储量为5MB左右(每个浏览器不一样)
5.常用场景:用来记录有没有提示过用户(没有用的信息,不能记密码)
6.LocalStorage 永久有效,除非用户清理
SessionStorage(会话存储)
用法与LocalStorage相同
1,2,3,4同上
5.SessionStorage在用户关闭页面后就失效
面试题:
1.请问cookie和session是什么关系?
session是基于cookie实现的。因为session将sessionID放到cookie再发送给客户端
2.cookie和LocalStorage的区别是什么?
cookie会被浏览器带到服务器,LocalStorage不会
存储量 10倍关系
3.LocalStorage和SessionStorage什么关系
SessionStorage在会话结束后就失效
HTTP缓存
web性能优化
Cache-Control (多久过期,时间长度)
如果我们的css和js文件很大,那么如何加快我们css和js的请求呢?
response.setHeader('Cache-Control', 'max-age=30000')
设置max-age的时间,一般为一年,一年只能只要是相同的url,客户端就不会向服务器发起请求,而是使用本地磁盘的缓存。
Expires (什么时候过期,时间点)
基本与Cache-Control相同,但Expires以用户的本地时间为基准
ETag
response.setHeader('ETag', MD5)
MD5是一种信息摘要算法,验证文件是否修改
Cache-Control 不请求
ETag 不下载但要请求