H5存储类型简介

一、客户端存储历程

    --远古时期

        1.cookies的用法和缺陷

        2.userdata

    --HTML5时代

        1.localstorage

        2.application cache

        3.indexedDB

---

二、HTML5存储具体介绍

    --使用规范

    --每种存储的特点以及解决的问题

    --在大型站点中的使用

    --具体业务适用的场景

---

三、案例

    --如何实现把图片存在客户端

    --如何实现跨域共享客户端缓存

    --如何做到真正的离线访问web应用

    --如何实现一个客户端的数据库

---

四、目录

    1.H5之前如何实现存储

    2.H5的几种常见的存储方式

    3.localstorage和sessionstorage

    4.application cache的介绍和使用

    5.indexDB的介绍和使用

    总结

---

服务器端的存储：

    1.cache : 缓存，从DB，磁盘上拿出来的东西放到缓存里，这样可以减少磁盘的IO，也是存放在内存里

    2.磁盘文件：把资源文件，比如图片或者视频都会存放到磁盘上

    3.数据库：想要快速索引一条记录

    4.内存 ： 如果要频繁的去使用，不可能频繁的去读DB或者频繁去读磁盘文件，可以放到内存里，提高读取效率

---

H5之前

    一、cookies诞生

H5之前通常是用cookies去存储浏览器端也就是客户端的一些内容。

特点 ：

    1.http请求头上会带着，这是一个比较大的缺点，你想，一个http请求要通过三次握手，整个过程已经是比较长，请求头又带着这么大一堆东西，就会非常臃肿

    2.大小4K（对于每个域名，客户端只会存4K）

    3.主Domin污染，这个和cookie相关，如果我们要把一些东西，比如域名全要放在主域名之下，那么所有的子域名去访问一条记录的时候，都会带着主域名的东西，这样存储势必会造成主域名cookies的污染，因为带着请求头，还存在安全隐患

所以如果用cookies存储一个东西的话，其实是很鸡肋的，既不能存太多，又有安全问题，以前是用它做购物和和身份验证等。

cookies在浏览器存储形态 :还可以

---

    二、userData

    1.只有IE支持

    2.XML文件

---

    三、H5的存储

    目标

        1.解决4K大小问题

        2.解决请求头带存储信息的问题

        3. 解决关系型存储的问题

        4.跨浏览器