HTML5存储

目录


HTML5存储_第1张图片

客户端存储的说明


HTML5存储_第2张图片

HTML5存储的说明


HTML5存储_第3张图片
HTML5存储_第4张图片

四种传统的存储方法


HTML5存储_第5张图片

四种传统的存储方法

  • cache(缓存)
  • 数据库
  • 磁盘文件
  • 内存

注意:

  • 内存——频繁的去使用去读取的放在内存
  • nodejs+mogoDB 数据库存储 也经常用到

cookies


HTML5存储_第6张图片

cookies

  • http请求头 会显得臃肿 而且效率相对较低
  • 4kb的大小 能存储的比较有限
  • 主Domain污染 反问记录或者http请求的时候,会带着主域名的东西,这样随意去存取得话,会造成主域名的污染

主域名的cookies会被追加到子域名的cookies里面,造成多极域名的cookies会变得很臃肿


举例:百度首页

HTML5存储_第7张图片
HTML5存储_第8张图片

HTML5的存储


H5的存储要解决的问题


HTML5存储_第9张图片
HTML5存储_第10张图片

1.HTML5本地存储------localstorage


HTML5存储_第11张图片
  • localstorage 不删除就永不消失
HTML5存储_第12张图片
  • sessionstorage 重新打开页面或者关闭浏览器就消失了
HTML5存储_第13张图片
HTML5存储_第14张图片

localStorage浏览器支持情况


HTML5存储_第15张图片

localStorageAPI使用方法


HTML5存储_第16张图片

localStorage能存储的东西


HTML5存储_第17张图片

localStorage一个存储图片的例子


HTML5存储_第18张图片
HTML5存储_第19张图片

localStorage注意事项


HTML5存储_第20张图片

localStorage使用限制


HTML5存储_第21张图片

localStorage过期控制的一个例子


HTML5存储_第22张图片

过期控制使用场景

HTML5存储_第23张图片

localStorage本地存储与网络拉取的对比


HTML5存储_第24张图片

2.IndexedDB


HTML5存储_第25张图片

IndexedDB浏览器支持


HTML5存储_第26张图片
  • w3c已不再维护Web SQL.
  • IndexedDB在移动端支持的不是太好。

IndexedDB存储结构


HTML5存储_第27张图片

IndexedDB的实际操作


HTML5存储_第28张图片
HTML5存储_第29张图片
HTML5存储_第30张图片
HTML5存储_第31张图片

3.离线缓存


离线缓存的概念


HTML5存储_第32张图片

离线缓存的原理


HTML5存储_第33张图片

离线缓存的浏览器支持情况


HTML5存储_第34张图片

离线缓存的使用方法


HTML5存储_第35张图片
HTML5存储_第36张图片
HTML5存储_第37张图片
HTML5存储_第38张图片

离线缓存中manifest的注意事项,优缺点以及试用场景


注意事项:

HTML5存储_第39张图片

优点:

HTML5存储_第40张图片

缺点:

HTML5存储_第41张图片

试用场景:

HTML5存储_第42张图片

一些非主流的存储方式


userData:

HTML5存储_第43张图片

goohle Gears

HTML5存储_第44张图片

总结:


HTML5存储_第45张图片
HTML5存储_第46张图片

HTML5应用缓存和Web Works


应用缓存


HTML5存储_第47张图片
HTML5存储_第48张图片

你可能感兴趣的:(HTML5存储)