html5 离线存储

<!DOCTYPE html>

<html manifest="cache.manifest">       <!--manifest存储-->

<head lang="en">

    <meta charset="UTF-8">

    <title>html5 离线存储  小应用</title>

</head>

<body>

1.在服务器如,apache 的httpd.conf 添加

AddType text/cache-manifest .manifest

2.顶部添加  manifest存储

3.编辑 cache.manifest

cache.manifest(文件名)

//以下是文件内容，缓存了一张图片

CACHE MANIFEST

2.png

</body>

</html>

html5 worker

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

html5 worker 在服务器后台创建一个线程，加快程序运行。

<script>

    var w1 = new Worker('test.js');

    w1.postMessage('hi');

    w1.onmessage = function(ev){    //  把一部分数据处理交给  html5  worker处理，

        alert( ev.data );

    };

</script>

<!--

test.js 文件 

self.onmessage = function(ev){

    self.postMessage(ev.data + '妙味课堂');   // 对数据进行处理，再返回

};

-->

</body>

</html>

内容编辑 语言输入 桌面提醒

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<!--内容编辑 contenteditable="true"-->

<div contenteditable="true" style="height:200px; width:200px; background:red;">aaaaaaaaaaa</div>

<!--语言输入   谷歌支持  可以录音输入   谷歌支持-->

<input type="text" x-webkit-speech />

<!--桌面提醒 谷歌支持-->

<script>

    window.webkitNotifications.requestPermission();

    statue = window.webkitNotifications.checkPermission();

    var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");

    notification.show();

</script>

</body>

</html>

html5 离线存储 worker的更多相关文章

  1. 吓哭原生App的HTML5离线存储技术，却出乎意料的容易！【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

  2. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  3. HTML5离线存储原理

    找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...

  4. 神奇的HTML5离线存储（应用程序缓存）

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  5. 【html5】html5离线存储

    html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...

  6. 利用Node实现HTML5离线存储

    前言 支持离线Web应用开发是HTML5的一个重点.离线Web应用就是在设备不能上网的时候仍然可以运行的应用.开发离线Web应用需要几个步骤,其中一个就是离线下必须能访问一定的资源(图像 JS css ...

  7. html5离线存储

    为了提升Web应用的用户体验,我们在做网站或者webapp的时候,经常需要保存一些内容到本地.例如,用户登录token,或者一些不经常变动的数据. 随着HTML5的到来,出现了诸如AppCache.l ...

  8. HTML5离线存储的工作原理和使用

    在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个 ...

  9. HTML5离线存储和本地缓存

    一.离线存储 有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest=" ...

随机推荐

  1. 在django项目外，使用django.db链接数据库(postgres)

    要用python链接到数据库,又不想写太多代码.想到了django,就偷懒了下.用django.db直连. django版本:1.6.5 (1.5以后可以用以下代码) #coding=utf-8 __ ...

  2. 使用 MongoDB 的_id 查询

    MongoDB 默认在插入数据时,生成一个主键_id,那么怎么使用_id来查询数据? 查询全部 > db.foo.find(){ "_id" : ObjectId(" ...

  3. java web 学习 --第五天（Java三级考试）

    第四天的学习内容:http://www.cnblogs.com/tobecrazy/p/3454860.html Response对象 response对象主要是向客户端浏览器发送二进制数据,如输出C ...

  4. CentOS搭建svn服务器支持https访问

    在CentOS6.3 64位机器上配置SVN服务器,并设置只允许HTTPS连接,可以配置多个repos源,每个源都拥有自己的组和成员,用于权限控制. 安装相关软件 Apache yum install ...

  5. 51 NOD 1384 全排列(STL 搜索)

    1384 全排列       基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题        收藏        关注   给出一个字符串S(可能又重复的字符),按照字典序 ...

  6. 转载jQuery图片放大插件[twiPicZoom]

    转载http://xuzhihong1987.blog.163.com/blog/static/26731587201312821725913/ 功能说明: 双击查看大图,鼠标滚动放大缩小,能够切换到 ...

  7. 【XLL API 函数】xlSheetId

    查找命名的工作表ID,用于外部引用. 原型 Excel12(xlSheetId, LPXLOPER12 pxRes, 1, LPXLOPER12 pxSheetName); 参数 pxSheetNam ...

  8. 关于Windows下的文件后缀名问题

    一.背景说明 有很多的小伙伴对windows下的文件后缀名不能很好地理解作用和区别,更不用说高深的使用了,在这里给大家说一下这些文件后缀名到底有什么区别,有什么作用呢? 二.说明 简单的说来,wind ...

  9. 你知道吗？Web的26项基本概念和技术

    这是我在网上看到一篇不错的文章,拿出来与大家分享一下:希望有所帮助 作者: 小鱼  来源: 前端里  发布时间: 2014-08-01 22:56  阅读: 10477 次  推荐: 51   原文链 ...

  10. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（七） 之 历史记录查询（时间，关键字，图片，文件），关键字高亮显示。

    前言 上一篇讲解了如何自定义右键菜单,都是前端的内容,本篇内容就一个:查询.聊天历史纪录查询,在之前介绍查找好友的那篇博客里已经提到过 Elasticsearch,今天它又要上场了.对于Elastic ...