cookie
cookie是存储在浏览器上的一小段数据,用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用 「document.cookie」查看你当前正在浏览的网站的cookie。
cookie可以使用 js 在浏览器直接设置(用于记录不敏感信息,如用户名), 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie,这是最常见的做法。(打开一个网站,清除全部cookie,然后刷新页面,在network的Response headers试试找一找set-cookie吧)
每次网络请求 Request headers 中都会带上cookie。所以如果 cookie 太多太大对传输效率会有影响。
一般浏览器存储cookie 最大容量为4k,所以大量数据不要存到cookie。
设置cookie时的参数:
domain 表示 Cookie 的作用域
path:表示 cookie 影响到的路径,匹配该路径才发送这个 cookie。
expires 和 maxAge:告诉浏览器 cookie 时候过期,maxAge 是 cookie 多久后过期的相对时间。不设置这两个选项时会产生 session cookie,session cookie 是 transient 的,当用户关闭浏览器时,就被清除。一般用来保存 session 的 session_id。
secure:当 secure 值为 true 时,cookie 在 HTTP 中是无效,在 HTTPS 中才有效
httpOnly:浏览器不允许脚本操作 document.cookie 去读取和更改 cookie。一般情况下都应该设置这个为 true,这样可以避免被 xss 攻击拿到cookie。
same-site 用于限制第三方 Cookie 的发送场景 。
- Strict 不允许第三方cookies
- Lax 默认 三种情况会发送 链接,预加载请求和get请求
- None 跨站都发送 Cookie
session
当一个用户打开淘宝登录后,刷新浏览器仍然展示登录状态。服务器如何分辨这次发起请求的用户是刚才登录过的用户呢?这里就使用了session保存状态。用户在输入用户名密码提交给服务端,服务端验证通过后会创建一个session用于记录用户的相关信息的对象,这个 session 可保存在服务器内存中(容易产生内存泄露),生产环境一般是保存在数据库中。
创建session后,会把关联的session_id 通过setCookie 添加到http响应头部中。
浏览器在加载页面时发现响应头部有 set-cookie字段,就把这个cookie 种到浏览器指定域名下。
当下次刷新页面时,发送的请求会带上这条cookie, 服务端在接收到后根据这个session_id来识别用户。
cookie 是存储在浏览器里的一小段「数据」,而session是一种让服务器能识别某个用户的「机制」,当然也可以特指服务器存储的 session 数据。session 在实现的过程中需要使用cookie。
缓存+更新机制
总结:
强缓存(200 from cache)
浏览器在请求已经访问过的URL的时候, 会判断是否使用缓存, 判断是否使用缓存主要通过判断缓存是否在有效期内, 通过两个字段来判断:
- Expires, 有效期, 返回的是一个GMT时间, 但是使用的是客户端时间, 与服务器时间存在一定时间差
- Cache-Control => max-age, 最大有效时间, 单位是s, 优先级比expires高, 为了解决expires时间差的问题而出现的
协商缓存( 304)
当缓存过期后, 浏览器不会直接去服务器上拿缓存, 而是判断缓存是否有更新, 能否继续使用, 判断的方法有两种:
- Last-Modified 和 If-Modified-Since: 服务器会响应一个Last-Modified字段, 表示最近一次修改缓存的时间, 当缓存过期后, 浏览器就会把这个时间放在If-Modified-Since去请求服务器, 判断缓存是否有更新
- Etag和If-None-Match: 服务器会响应一个Etag字段, 一个表示文件唯一的字符串, 一旦文件更新, Etag也会跟着更改, 当缓存过期后, 浏览器会把这个字符串放在If-None-Match去请求服务器, 判断是否有更新, Etag的优先级比Last-Modified的更高, Etag的出现, 是为了解决一个缓存文件在短时间内被多次修改的问题, 因为Last-Modified只能精确到秒.
那[ETag、If-None-Match]这么厉害我们为什么还需要[Last-Modified、If-Modified-Since]呢?有一个例子就是分布式系统尽量关闭掉ETag(每台机器生成的ETag都会不一样)
[Last-Modified,If-Modified-Since]和[ETag、If-None-Match]一般都是同时启用。
详细文章:缓存
POST, GET区别
1.GET用来从服务端获取数据,POST用于上传或者修改数据
2.GET大小限制在2KB以内,POST一般没有限制
3.GET参数在URL,POST参数在请求主体中(也就是用send发送),安全性POST高(高一点,因为post需要用form构造,get可以轻易构造)
4.部分浏览器会缓存GET请求的response,以至于相同的GET请求会得到相同的response即使服务端的数据已经改变,POST不会被缓存
5.使用XMLHttpRequest时,POST需要显示指定请求头(因为Post一般含有entity-body)
6.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); //用POST的时候一定要有这句 (Content-Type可以不一样)
post vs get
1.表象不同,get提交的数据url可以看到,post看不到
2.原理不同,get 是拼接 url, post 是放入http 请求体中
3.提交数据量不同,get最多提交1k数据,浏览器的限制。post理论上无限制,受服务器限制
4.get提交的数据在浏览器历史记录中,安全性不好
5.场景不同,get 重在 "要", post 重在"给"