一:Web存储
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
web存储有两种;
- localStorage - 没有时间限制的数据存储,存于浏览器缓存
- sessionStorage - 针对一个 session 的数据存储,绘画关闭就清理
if(typeof(Storage)!=="undefined")//检查是否支持web存储 { // Yes! localStorage and sessionStorage support! localStorage.key = value //创建内容 localStorage.key //获取内容 sessionStorage.key = value //创建内容 sessionStorage.key //获取内容 } else { // Sorry! No web storage support.. }
二:Web应用缓存
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
1:启用 应用程序缓存
...
2: 编写manifest
manifest 文件是简单的文本文件:
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST # 2012-02-21 v1.0.0 注解 /theme.css /logo.gif /main.js NETWORK: login.php FALLBACK: /html/ /offline.html
3:注意
一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)
三:异步运行脚本
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
//一个js文件var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();
四:接受服务器推送
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。
而现在,通过服务器发送事件,更新能够自动到达,类似于移动App的推送一样。
EventSource 对象用于接收服务器发送事件通知:
if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! var source=new EventSource("接收更新的页面文件"); source.onmessage=function(event) { //每当有推送更新,则调用该事件。 } else { // Sorry! No server-sent events support.. }
五:web sql
Html5数据库API是以一个独立规范形式出现,它包含三个核心方法:
1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction:这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql:这个方法用于执行真实的SQL查询。