数据存储

数据存储的产生是因为期待有种机制能够在用户的机器上储存用户特殊的相关信息,比如:用户登录信息,用户偏好设定等其他特有的数据。其主要储存形式有两大块,一块是cookie(每次请求都会携带,与服务器交互频繁),另一块就是离线储存(Web Storage,只与服务器交互一次,即:获取需储存数据)。

一、cookie
cookie一般作为储存用户的登陆信息,比如sessionId、token等。并且在服务器要求的设定下,以指定的连接方式,在指定路径的页面向指定的域名下的服务器发送请求时,请求头部都会带上cookie字段。

1、限制
1.1、cookie相对于Session Storage、Local Storage和IndexedDB,cookie的容量较小,视浏览器不同,之间大小略有差异,总的来说,大小约为4KB,也就是4096个字节大小;

1.2、每个域限制的cookie总数也就浏览器有着不同的差异,一般为最多30~50个cookie(key=value;为一个cookie,比如:name=chujiu;);

2、cookie的构成
2.1、名称:一个唯一确定cookie的名称,也可以说是这条cookie的索引。名称必须经过URL编码转化。

2.2、值:储存在cookie中的字符串。值必须经过URL编码转化

2.3、domain(域):指定cookie会向那些域发送。在本身和其子域下,cookie发送有效

2.4、path(路径):指定cookie在那些路径页面中发送请求时会被携带。在本身和其子路径下页面所发请求,cookie携带有效

2.5、expires(有效时间):表示cookie何时会被删除。默认时间为浏览器会话结束时(关闭对应会话界面)删除cookie

2.6、secure(安全标识):表示cookie只能通过SSL链接才能传输

登陆请求响应头部Set-Cookie(就拿csdn为例)
在这里插入图片描述
请求发送请求头部Cookie(就拿csdn为例)
在请求发送所携带的cookie是不会传输全部内容,它会整合所有set-cookie中的键值对(存在数量限制和字节大小限制的哟),以指定的连接方式,发送给指定域名下服务器,在指定路径下页面的所有请求中。
在这里插入图片描述
3、本地脚本中的cookie
我们可以通过document.cookie给对应的会话页面修改/增加cookie,以及可以通过一系列的api拿到cookie,改变cookie。唯一要注意的是,记住要对其进行URL转码(encodeURIComponent(item)

二、web Storage----客户端存储机制
当我们在第一次登陆时,服务器将某段用户特有信息发送到客户端,且之后无须将此段数据返回到服务器。此时我们就需要客户端存在某种机制可以离线储存这段数据,并且不会在之后的请求发送给服务器。因此Web Storage就此诞生。

1、Session Storage
sessionStorage对象用于存储特定于某个会话的数据。也就是说它会维持sessionStorage对象到这个会话所对应的页面关闭之前,并且若这个会话所对应页面的刷新并不会清空sessionStorge对象内部数据。

2、Local Storage
localStorage对象用于永久保存在某个路径页面请求的某个域名下服务器发送而来的数据。也就是说在同一个客户端(浏览器)上,只要在localStorage对象中保存过相关数据,下次再次打开同一个客户端,访问同一安全协议下的同一域名下(子域名无效)的对应路径及其子路径页面时,localStorage中的数据依旧存在。

3、IndexedDB
IndexedDB是HTML5中用于存储结构化数据的一种客户端数据库,其存储生命周期特性同localStorage一样。此外,IndexedBD的一系列操作都是异步操作,比如创建数据库,建立表结构,初始化表结构等。
以下是我对IndexedDB的一些操作具体的实操
git地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值