cookie
cookie 是存储在浏览器本地的一小段数据(最大不超过4k),用来记录一些当页面关闭后还需要存储的数据。例如用户名、浏览历史之类的不敏感信息。每次网络请求的请求头(Request headers),都会带上 cookie ,所以 cookie 太多会影响网络传输效率。
cookie 可以使用 js 在浏览器设置,但是通常我们选择在服务端使用 HTTP 协议规定的 set-cookie 来设置 cookie 。cookie 存储的数据只支持 string 格式,如果存入其他类型的数据,会自动转化为 string 类型。
我们可以在本地浏览器中使用document.cookie
来查询当前网站设置的 cookie 。
cookie 设置时的参数:
- path:表示影响 cookie 的路径。只有到 path 时才发送当前 cookie;
- Expires/Max-Age:当前 cookie 的过期日期。expires 是UTC格式时间,max-age 是 cookie 多久后过期的相对时间;
- secure:如果为 true 时,表明当前 cookie 在HTTP中是无效的,只能在HTTPS下使用;
- httpOnly:如果为 true ,表明不允许浏览器脚本操作
document.cookie
去更改 cookie 。
session
session 看起来和 cookie 是差不多的东西,但是两个东西实际上不是同一维度的东西。cookie 是存储的一小段数据,而 session 是在实现过程中使用到 cookie 。
当你登录某些页面时,刷新后发现你的登录状态还在,服务器如何知道你是登录状态呢??
当用户正确登录页面时,会向服务器发送请求,服务器通过验证后会生成一个对象,对象里有一个 id 。这个 id 是随机生成的,而这个对象就可以认为是 session 。服务器将返回的 session 字段添加到 cookie 里,当你再次向服务器发送请求时就会带上 cookie ,服务器只需要验证 cookie 里的 session_id 就可以得知当前的用户。
其实 session 最大的作用就是进行用户身份的验证。
localStorage
localStorage 不同于 cookie 和 session ,单纯是一个存储数据的东西。
localStorage 一般用于存储大量数据(最大5M)在浏览器中,保存的数据永久不会失效,除非用 JS 手动清除。
localStorage 不参与网络传输,一般用于性能优化,可以保存图片、JS、CSS、Html模板、大量数据。