HTML5之存储

1.什么是web app
html5+css3+javascript，而不是java、object-c
下面介绍三种存储技术

HTML提供的数据持久化–离线缓存技术

数据持久化就是将数据保存在本地。

1. Application cache

也叫应用缓存，在本地缓存应用所需要的文件，只能缓存应用本身而非应用所需的数据。离线情况下也能使用web应用（从缓存中拉取缓存的文件）

开发者可以使用 Application Cache (AppCache) 接口设定浏览器缓存的数据并使得数据离线有效。应用缓存（又称 AppCache）可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。

manifest属性值是一个文件列表，其中列出了需要被浏览器离线缓存的文件。manifest作为html标签的属性.

缓存过程：

• 当访问了一个具有manifest属性的页面时，如果应用缓存不存在，浏览器会则会加载该闻榜并自动缓存清单中列出的文件；
• 之后浏览器会发送一个checking事件给window.applicationCache对象，这样会像服务器发送http请求，查看清单有无更新：
  如果没有，浏览器会给window.applicationCache对象发送noupdate事件。如果有更新，文件中列出的所有文件—也包括通过调用
  applicationCache.add(）方法添加到缓存中的那些文件—会被获取并放到一个临时缓存中，对于每个加入到临时缓存中的文件，浏览器会向 applicationCache
  对象发送一个 progress 事件。如果出现任何错误，浏览器会发送一个 error 事件，并暂停更新。
• 一旦所有文件都获取成功，它们会自动移送到真正的离线缓存中，并向 applicationCache 对象发送一个 cached事件。鉴于文档早已经被从缓存加载到浏览器中，所以更新后的文档不会重新渲染，直到页面重新加载(可以手动或通过程序).

下面是一个缓存清单的例子：

CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png

# Use from network if available
NETWORK:
network.html

# Fallback content
FALLBACK:
/ fallback.html

一个缓存清单文件可以包含三段内容 (CACHE， NETWORK， 和 FALLBACK）。

• CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
• NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
• FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

#表示注释，v1表示版本号，你可以改变清单中的任何部分，但是修正版本号通常是作为判断离线缓存文件有无更新的好方式。

缺点：
即便有更新也是从缓存中拉取之前的文件，只有在第二次刷新的时候才能访问到更新后的缓存文件。
即便只有一个文件修改了，也会重新从server中拉取manifest中列出的所有文件，并在浏览器缓存中更新。
如果有一个文件更新失败了，那么这次更新就算作失败。
由于appCache具有上述缺点，如果某个文件会频繁更新，那么更适合的存储方式是localStorage。

具体查看文档：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache

2.web storage之local storage和session storage
web storage是为了解决cookie的限制，数据需要存储在客户端，而无需持续地发送回服务器时。

提供了一种除了cookie以外可以存储会话数据的途径；
提供了一种可以存储大量可以跨会话存在的数据的机制

这两个又叫DOM存储，采用键值对儿的方式存储数据，只能存字符串这样的数值，不能存文件。其中前者是没有时间限制的数据存储，后者针对一个session的存储，当用户关闭浏览器窗口后，数据会被删除。每个域名有5M大小。

• localStorage
  常用API
  localStorage.setItem(‘key’,’value’);
  localStorage.getItem()
  localStorage.removeItem()
  localStorage.clear()
  localStorage.key(index);//获取键的名称，index从0开始

  只要能被序列化成字符串的数据都能存放在localStorage中。

sessionStorage有类似的方法
HTML5 使用 JavaScript 来存储和访问数据。例子-统计页面访问次数：

<script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else{localStorage.pagecount=1;} document.write("Visits "+ localStorage.pagecount + " time(s)."); </script>

如何选择localStorage和app cache：

store the backend json data in localStorage
templates for that data in app cache

3.web sql
是浏览器可以访问的本地数据库。
4.index DB
一种能在浏览器中持久地存储结构化数据的数据库（web sql），也是采用键值对儿方式，与local storage相比存储量更大，查询速度更快。

cookies

1.会随http请求头部发送，信息臃肿
2.一个域名下的cookie个数有限制，并且每个cookie有大小为4kb的容量
3.安全隐患
主域名中设置的cookie，在请求子域名时，也会随HTTP头部发送。
4.当会话结束的时候，cookie会自动销毁。

Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

离线应用实战项目

问题：
无刷新页面切换，Url后添加#？ hashchange事件
localStorage如何确定数据有没有更新

离线化处理个文件采取什么方式：