html5 说明

# 客户端储存历程

　　远古时期

　　cookies的用法和缺陷

　　userdata

 

HTML5时代

　　localstorage

　　application cache 离线缓存

　　indexedeDB 客户端数据库

 

 

# HTML5储存具体介绍

　　使用规范

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

   　在大型站点中的使用

　　具体业务适用的场景

 

 

# HTML5储存（大量案例）

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

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

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

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

待续

 

 

# 目录

H5之前如何实现储存

H5的几种常见的存储方式

localstorage && sessionstorage

application cache的介绍和使用

indexDB的介绍和使用

总结

 

 

# 关于储存

储存

cache

磁盘文件

数据库

内存

 

 

# H5之前

cookies诞生。。。

http请求头上会带着

大小4k

主Domain污染

cookies在浏览器储存形态

UserDate

1.只有IE支持（不符合w3c）

2.XML文件

 

 

# H5的储存

目标

解决4k的大小问题

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

解决关系型储存的问题

跨浏览器

 

 

# H5的几种储存

几种储存形式

本地存储 ( localstorage && sessionstorage )

离线缓存 ( application cache )

IndexedDB 和 Web SQL

 

 

# H5本地储存

API

localstorage && sessionstorage

存储形式：

key --> value

过期

localstorage永久存储，永不失效，除非手动删除

sessionstorage如果：重新打开页面 或 关闭浏览器，就消失了

大小

官方给出的文档是，每个域名5M

 

 

使用方法

localstorage API介绍

getItem 取

setItem 设置

removeItem 移除

key 拿某一个索引

clear 全部删掉

 

 

都可以存什么东东

数组

json数据

图片

脚本

样式文件

 

 

使用注意事项：

1.使用前要判断浏览器是否支持

2.写数据时候，需要异常处理，避免超出容量抛错

3.避免把敏感的信息存入localstorage

4.key的唯一性

 

 

使用限制：

1.存储更新策略，过期控制

2.子域名之间不能共享储存数据

3.超出存储大小之后如何存储 ( LRU , FIFO 算法淘汰旧的数据)

4.server端如何取到

使用场景：

1.利用本地数据，减少网络传输

2.弱网络环境下，高延迟，低宽带，尽量把数据本地化

 

 

# Web SQL 和 IndexedDB

 

indexedDB database

一种能在浏览器中持久地存储结构化数据的 数据库， 并且为web应用提供了丰富的 查询 能力

 

浏览器

chrome 11+

opera 不支持

firefox 4+

IE 10+

eg:移动端支持的是web sql .不过w3c不再维护web sql

 

存储结构

IndexedDB是按域名分配独立空间，一个独立域名下可以创建多个数据库，每个数据库可以创建多个对象存储空间（表），一个对象存储空间可以存储多个对象数据

IndexedDB 

a.qq.com ->DB_A ->table_A1 ->object_record

->table_A2 ->object_record

b.qq.com ->DB_B 

 

 

# WebSql 和 IndexedDB

1.增，删，改

2.事务

3.游标

4.索引

 

 

 

# H5离线缓存

　　什么离线缓存（offline application）

　　它可以让Web应用在离线的情况下继续使用，通过manifest文件指明需要缓存的资源

 

　　检测是否在线

　　navigator.onLine

 

 

　　原理

　　

 

 

 

使用

创建manifest文件

CACHE MANIFEST

#version n.n

 

CACHE:

#需要缓存的文件

/css/sample.css

/images/image.jpg

 

NETWORK:

#每次重新拉取的文件

* (代表除了cache外从server拉取的文件)

FALLBACK:

# 离线状况下代替文件

/ offline.html

 

在HTML页面中引用manifest文件

<html manifest="sample.appcache">

 

在服务器添加mime-type text/cache-manifest

 

如何更新

如果有修改资源文件，必须通过修改manifest文件来刷新被缓存的文件列表

 

优势

1.完全离线

2.资源被缓存，加载更快

3.降低server负载

 

使用缺陷

1.含有manifest属性的当前请求页无论如何都会被缓存

2.更新需要简历在manifest文件的更新，文件更新后是需要页面再次刷新的（需要2次刷新才能获取新资源）

3.更新是全局性的，无法单独更新某个文件（无法单点更新）

4.对于链接的参数变化是敏感的，任何一个参数的修改都会被（master）重新缓存（重复缓存含参页面）index.html和index.htm?renew=1 会被认为是不同文件，分别缓存

 

试用场景

1.单地址的页面

2.对实时性要求不高的业务

3.离线webapp

 

# 还有哪些客户端存储

uerDate 

64k

只支持IE（5.0---9.0）

google Gears

64SQLite

chrome

12.0后放弃支持

用户授权

 

 

##### 总结 #####

H5存储优势

存储空间大

接口丰富

数据相对安全 （把数据存在客户端，没把数据跟URL带上）

关系型 （indexDB）

省流量

 

H5存储劣势

浏览器兼容

同源 （子域名不能共享）

脚本控制

更新策略