cooki是一种存储机制
第一次请求网页内容时没有任何cookie,服务器在收到请求以后会在HTTP响应里添加添加头部Set-Cookie,并且在Set-Cookie里进行标识,在下一次请求的时候浏览器就会在HTTP请求里添加头部Cookie,并且用上Set-Cookie里的标识,这样服务器就可以给不同用户匹配不同的内容,自打服务器给了Set-Cookie以后,以后每一次HTTP请求都要把Cookie数据传送给服务器,如果每一次都要把含有大量数据的Cookie发送给服务器,无疑是一种自杀行为
Cookie设计得很小,不能超过4KB
点击记住我,并且登录以后,在下次登录时就无需再次输入用户名,勾选记住即表示设置Cookie,登录按钮提交HTTP请求
Cookie的基本语法就是使用:documen.cookie
document.cookie属性值是字符串类型,这个字符串最核心的内容就是名值对
实际浏览器对每个网站的cookie数量是有限制的
Web存储也就是本地存储:其中两个重要对象是localStorage和sessionStorage当用户第一次请求服务器时,服务器响应内容并且附加可操控网页的JS,当用户操作JS进行个人设置的时候,这些个人设置可以通过Web存储机制保存在浏览器里
localStorage会永远保存在浏览器里,也可自行删除,虽然保存下来了,但他本身不参与服务器通信,
这样看存储的容量比cookie大非常多,但是因为localStorage是同步的机制,会影响浏览器渲染进度
sessionStorage会保存在浏览器里,但是窗口关闭就会被删除
cookie的容量非常小,实际当中更小
localStorage和sessionStorage比较大
但是localStorage同步执行,太大会影响渲染进度
浏览器都能支持cookie,但是只有现代浏览器能支持Web存储
当cookie和localStorage被保存下来以后,所有窗口都能够访问,当然需要同源
sessionStorage仅在当前窗口有效,相对安全性高很多
有效期的话Cookie是可以手动设置的,localStorage不会过期,除非自行删除,sessionStorage在窗口关闭后就过期了
Wbe存储都仅仅保存在本地浏览器里,但是cookie是在浏览器和服务器两者里,因为cookie会在第二次后的每次HTTP请求里出现,而Web存储本身不参与请求活动
语法来说肯定是cookie比较难用,而且要在前面加document.
web存储就简单非常多,而且因为直属window,可以不加window直接调用,存储内容5Mb左右,不同浏览器可能还不一样
本地存储保存setItem的是字符串形式,所以要保存对象就先用JSON.stringify()转换成字符串,如果使用getItem读取的数据是字符串,可以用JSON.parse()转换成对象,简单有好看
cookie | localStorage | sessionStorage | |
---|---|---|---|
大小 | 4kb | 10Mb | 5Mb |
兼容 | H4/H5 | H5 | H5 |
访问 | 任何窗口 | 任何窗口 | 同一窗口 |
有效期 | 手动设置 | 无 | 到窗口关闭 |
存储位置 | 浏览器和服务器 | 浏览器 | 浏览器 |
与请求一起发送 | 是 | 否 | 否 |
语法 | 复杂 | 简易 | 简易 |