# 客户端储存历程
　　远古时期
　　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存储劣势
浏览器兼容
同源 （子域名不能共享）
脚本控制
更新策略

html5 说明的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  10. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

  1. 深入浅出java静态代理和动态代理

    首先介绍一下.什么是代理: 代理模式,是经常使用的设计模式. 特征是.代理类与托付类有同样的接口,代理类主要负责为托付类预处理消息.过滤消息.把消息转发给托付类.以及事后处理消息. 代理类和托付类,存 ...

  2. 【Nginx】HTTP配置模型

    当Nginx检測到配置文件里存在配置块http{}时.会建立一个ngx_http_conf_ctx_t结构体,该结构体定义例如以下: typedef struct { void **main_conf ...

  3. beyond compare 软件学习

    beyond compare 软件可以实现基本的文件对比,这点和 NotePad++ 的功能一样.但是在实现文件夹与文件夹之间的对比的话,就要使用 beyond compare 进行对比,效率是成倍提 ...

  4. Word基本文档字体设置

    另:段落行距选择:固定值:26/28

  5. ClassLibary和WPF User Control LIbary和WPF Custom Control Libary的异同

    说来惭愧,接触WPF这么长时间了,今天在写自定义控件时遇到一个问题:运行界面中并没有显示自定义控件,经调试发现原来没有加载Themes中的Generic.xaml. 可是为什么在其他solution中 ...

  6. Spring学习二----------IOC及Bean容器

    © 版权声明:本文为博主原创文章,转载请注明出处 接口 用于沟通的中介物的抽象化 实体把自己提供给外界的一种抽象化说明,用以由内部操作分离出外部沟通方法,使其能被修改内部而不影响外界其他实体与其交互的 ...

  7. asp.net core 系列之Response caching(1)

    这篇文章简单的讲解了response caching: 讲解了cache-control,及对其中的头和值的作用,及设置来控制response caching; 简单的罗列了其他的缓存技术:In-me ...

  8. IDEA导入tomcat9源码跑起来~

    如题,这里记录一下用IDEA导入tomcat9的源码,并跑起来.看了本教程你还是不会的话直接问我. 一.环境安装以及目录搭建 tomcat9源码下载地址:http://mirrors.hust.edu ...

  9. ACE_Svc_Handler 通信原理

    ACE作为通讯方面的开源架构,不但用c++实现,而且用JAVA实作的架构已经可以使用了,由此看来掌握ACE成为每歌开发通讯程序的程序员的必备技能. ACE的库分为4个层次: OS适配层该层将ACE的较 ...

  10. oracle中nvl()函数

    oracle中nvl()函数  oracle的nvl函数的使用方法 通过查询获得某个字段的合计值,假设这个值位null将给出一个预设的默认值  select nvl(sum(t.dwxhl),1) f ...