目录
1.cookie
cookie的特点
1.本身用于浏览器和server通讯
2是http请求的一部分
3是被"借用"到本地存储上来(localstorage和sessionstorage是H5之后才提出的,存储不是cookie主要应该做的事)
4.可用document.cookie = '....'来修改(前后端都可以修改cookie)
cookie的价值不在于本地存储,而在于本地和服务器端的通讯,cookie带了个人信息,所以打了马赛克
代码演示
当然在这里都是相同的domain和path
执行之后我们看一下Application
下面演示一下相同的key但是Domain和Path不同,它并不会覆盖
我们刷新一下
刷新之后会将cookie内容发给服务器,如果加个user_id服务器就知道是哪个用户了,所以上面的cookie图打了马赛克
cookie的缺点
1.存储大小最大是4KB
2.http请求时需要发送到服务端,增加请求数据量(刷新一个网页是有很多请求的,比如上面的图,如果每个请求都带上这个cookie,那将是一个非常大的开销)
3.只能用document.cookie = '...'来修改,太过于简陋
2.html5存储
localStorage和sessionStorage特点
1.localStorage和sessionStorage是HTML5专门为存储设计的,每个域最大可存储5M(对于前端存储字符串这个空间够大了)
2.localStorage和sessionStorage的API简单易用setItem getItem
3.不会随着http请求被发送出去(cookie就会被发送出去,要是localStorage和sessionStorage随着http请求发送出去手机流量早就没了)
代码演示
再到Application看看
1.localStorage数据会永久存储,除非代码或手动删除
2.sessionStorage数据只存在于当前会话,浏览器关闭则清空
关注、留言,我们一起学习。
===============Talk is cheap, show me the code================