前端面筋-客户端存储

笔记-关于客户端存储

一、前提

1.使用navifator.onLine属性可以判断是否能够上网；html还定义了两个事件，online和offline事件，可以检测网络的连通状况；

二、应用缓存

1.应用缓存：application cache：是从浏览器缓存中分出来一块缓存区，将想要下载和缓存的资源列在一个描述文件中描，描述文件扩展名使用.manifest，MIMTE-type类型必须为text／cache-manifest。

 

过程：当我们第一次正确配置cache manifest以后，浏览器会将清单文件中的资源缓存下来，当我们再次访问的时候，浏览器就会直接返回缓存中的方法，检查manifest文件是否有变动，有变动的话，就把相应的变动更新下来，同时改变浏览器的app cache

文件中有3个部分：

1.CACHE MANIFEST—在此标题下列出的文件将在首次下载后进行缓存；

2.NETWORK—在此标题下列出的文件需要与服务器的连接，且不会被缓存；

3.FALLBACK—在此标题下列出的文件规定当页面无法访问时的回退页面（404）

2.检查是否支持缓存，window.applicationCache对象，有一个属性status可以用来检查缓存情况，0-5状态值；可以在applicationCache上添加一系列事件；

三、数据存储

1.cookie：cookie有大小和数量限制，数量上：每种浏览器限制在每个域名最多20个和50个不等当超出了限制之后，再设置cookie就会清除以前的cookie；清除的原则有按照最近最久未使用丢弃的，也有随机丢弃的；大小上：限制在4KB内

2.cookie的构成：

名称：不区分大小写；

值：

域：对哪个域有效；

路径：对于指定域的路径，才会发送cookie

失效时间：设置失效时间则存储在硬盘上，否则存储在内存中。

安全标志secure：只有在协议是https的时候才会发送cookie

3.所有的名字和值都是经过URL编码的，所以必须使用decodeURIComponent来解码;

4.子cookie：value中存了一串键值对

IE用户数据

1.用户数据允许每个文档最多128kb数据，每个域名最多1Mb的数据

Web存储机制

1.提供了除cookie之外的会话数据存储方案；能存储大量可以跨会话存在的数据的机制；

2.storage只能存储字符串；

3.localstorage页面必须来自同一个域名（子域名无效），使用同一种协议，同一个端口号；不超过5M，超过了会报错，QUOTA_EXCEEDED_ERR

4.对storage对象做任何的修改，都会在文档上触发storage事件，这个事件对象有以下属性：domain、key、newValue、oldValue。

IndexedDB。 跟mongodb等一样是一个文档类型的数据库

1.允许用户在浏览器中保存大量的数据，任何需要发送大量数据的应用都可以得益于这个特性，可以把数据存储在用户的浏览器端。

localStorage和sessionStorage的联系与区别

1.联系：都是用于存储用户的临时信息，都只能存储字符串格式的

2.区别：一个是永久存储的，一个是当标签页或者是浏览器关闭之后，就消失了。同源下的local和session的标签页之间是都是共享的，相同浏览器的不同页面之间可以共享相同的local，却不能共享session