web中的k-v存储(键值对存储)

cookie/session/localstorage/sessionstorage

共同点

1.他们都是k-v存储
2.针对同一域名都可以用的

不同点

1.cookie 放进请求头中,随请求头每次提交,浪费带宽,可跨页不可跨域
2.localstoraeg 不随请求头提交,可以长时间保存,可跨页不可跨域
3.sessionstorage不随请求头提交,页面关闭即失效,不可跨页不可跨域
4.cookie/localstorage/sessionstorage都是存储在客户端,session存储在服务端
5.前面三个都可以在客户端,通过js脚本去修改,而session不行
所以session的安全性更高,适合用户敏感型数据的记录
前三者适合页面端常用数据的记录


1.实操感受一下键值对存储

打开百度,我们在cookies里看一下当前我们设置好的一些cookie
name就是它的key
web中的k-v存储(键值对存储)_第1张图片
输入

document.cookie  查看信息
document.cookie="kkk=vvv"  设置一个kkk=vvv

回车,我们可以看到数据里多了一条

web中的k-v存储(键值对存储)_第2张图片
web中的k-v存储(键值对存储)_第3张图片
web中的k-v存储(键值对存储)_第4张图片


2.实操感受一下同域名可用

我们随便在百度搜索一些东西,查看cookies,kkkvvv仍是生效的
但是不能跨浏览器
web中的k-v存储(键值对存储)_第5张图片


3.已经有cookie为什么还要使用localstorage,sessionstorage呢

我们每次进行请求的时候
比如我们请求的百度首页,携带着cookie的信息
web中的k-v存储(键值对存储)_第6张图片
每次进行请求的时候,会将全量的cookie信息统一作为请求的一部分进行上传,这样的话我们的cookie储存的数据就不能太大,太大的话,每次提交都会浪费带宽。
所以在HTML中,提出了新的概念localstorage

(1)cookie和localstoraeg的区别

cookie 放进请求头中,随请求头每次提交,浪费带宽
localstoraeg 不随请求头提交,可以长时间保存

(2)sessionstorage和localstorage的区别

sessionstorage和localstorage面向的点不同,但是用法相同
sessionstorage 从概念上讲,是session会话,会话存储,即当前我如果关闭网站,会话就会被删除
并且不支持跨标签页

(3)尝试一下

localStorage.setItem("kk","vv")

web中的k-v存储(键值对存储)_第7张图片
web中的k-v存储(键值对存储)_第8张图片

(4)尝试一下

sessionStorage.setItem("k","v")   //输入
sessionStorage.getItem("k")       //读取

web中的k-v存储(键值对存储)_第9张图片

4.服务端存储——session

(1)尝试设置一个session


web中的k-v存储(键值对存储)_第10张图片
怎么说明我们的session是设置在服务端的呢?

再写一个php代码,只输出


web中的k-v存储(键值对存储)_第11张图片

信息是设置在服务端的,它能够唯一读取辨认出客户端,我们新建一个隐私窗口,是读不出来的
因为隐私窗口会清除之前的信息,重新请求,即一个新的浏览器
web中的k-v存储(键值对存储)_第12张图片

(2)session存储在服务端的好处

1.数据在客户端没有任何信息,只在cookie里有一个标识ID,这个ID没什么用,并且会随时变化
2.数据存储在服务端,客户端就不能通何脚本去进行任何修改

你可能感兴趣的:(自学)