使用HTML5的Notification API制作web通知的教程,html5notification

by admin on 2019年9月21日

HTML5 web通知API介绍

2015/04/17 · HTML5 · 2
评论 ·
web通知

本文由 伯乐在线 –
ElvisKang
翻译,周进林
校稿。未经许可,禁止转载!
英文出处:www.sevensignature.com。欢迎加入翻译组。

图片 1

在使用网页版Gmail的时候,每当收到新邮件,屏幕的右下方都会弹出相应的提示框。借助HTML5提供的Notification
API,我们也可以轻松实现这样的功能。

使用HTML5的Notification API制作web通知的教程,html5notification

这篇文章主要介绍了使用HTML5的Notification
API制作web通知的教程,示例包括需要使用到的相关CSS以及Javascript代码,需要的朋友可以参考下

在使用网页版Gmail的时候,每当收到新邮件,屏幕的右下方都会弹出相应的提示框。借助HTML5提供的Notification
API,我们也可以轻松实现这样的功能。
确保浏览器支持

如果你在特定版本的浏览器上进行开发,那么我建议你先到 caniuse
查看浏览器对Notification
API的支持情况,避免你将宝贵时间浪费在了一个无法使用的API上。
如何开始
 

JavaScript Code复制内容到剪贴板

  1. var notification=new Notification(‘Notification Title’,{  
  2.     body:’Your Message’   
  3. });   
  4.   

上面的代码构造了一个简陋的通知栏。构造函数的第一个参数设定了通知栏的标题,而第二个参数则是一个option
对象,该对象可设置以下属性:

  •     body :设置通知栏的正文内容。
        dir
    :定义通知栏文本的显示方向,可设为auto(自动)、ltr(从左到右)、rtl(从右到左)。
        lang
    :声明通知栏内文本所使用的语种。(译注:该属性的值必须属于BCP 47
    language tag。)
        tag:为通知栏分配一个ID值,便于检索、替换或移除通知栏。
        icon :设置作为通知栏icon的图片的URL

获取权限

在显示通知栏之前需向用户申请权限,只有用户允许,通知栏才可出现在屏幕中。对权限申请的处理将有以下返回值:

  •    
    default:用户处理结果未知,因此浏览器将视为用户拒绝弹出通知栏。(“浏览器:你没要求通知,我就不通知你了”)
        denied:用户拒绝弹出通知栏。(“用户:从我的屏幕里滚开”)
       
    granted:用户允许弹出通知栏。(“用户:欢迎!我很高兴能够使用这个通知功能”)
       
       

JavaScript Code复制内容到剪贴板

  1. Notification.requestPermission(function(permission){   
  2.     //display notification here making use of constructor
      
  3.     });   
  4.   

用HTML创建一个按钮
 

XML/HTML Code复制内容到剪贴板

  1. <button id=”button”>Read your notification</button>  
  2.   

不要忘记了CSS
 

CSS Code复制内容到剪贴板

  1. #button{   
  2.   font-size:1.1rem;   
  3.   width:200px;   
  4.   height:60px;   
  5.   border:2px solid #df7813;   
  6.   border-radius:20px/50px;   
  7.   background:#fff;   
  8.   color:#df7813;   
  9. }   
  10. #button:hover{   
  11.   background:#df7813;   
  12.   color:#fff;   
  13.   transition:0.4s ease;   
  14. }   
  15.   

全部的Javascript代码如下:
 

JavaScript Code复制内容到剪贴板

  1. document.addEventListener(‘DOMContentLoaded’,function(){   
  2.         document.getElementById(‘button’).addEventListener(‘click’,function(){   
  3.             if(! (‘Notification’ in window) ){   
  4.                 alert(‘Sorry bro, your browser is not good enough to display notification’);
      
  5.                 return;   
  6.             }       
  7.             Notification.requestPermission(function(permission){   
  8.                 var config = {   
  9.                               body:’Thanks for clicking that button. Hope you liked.’,
      
  10.                               icon:”,
      
  11.                               dir:’auto’  
  12.                               };   
  13.                 var notification = new Notification(“Here I am!”,config);   
  14.             });   
  15.         });   
  16.     });   
  17.   

从这段代码可以看出,如果浏览器不支持Notification
API,在点击按钮时将会出现警告“兄弟,很抱歉。你的浏览器并不能很好地支持通知功能”(Sorry
bro, your browser is not good enough to display
notification)。否则,在获得了用户的允许之后,我们自制的通知栏便可以出现在屏幕当中啦。

为什么要让用户手动关闭通知栏?

对于这个问题,我们可以借助setTimeout函数设置一个时间间隔,使通知栏能定时关闭。
 

JavaScript Code复制内容到剪贴板

  1. var config = {   
  2.                body:’Today too many guys got eyes on me, you did the same thing. Thanks’,
      
  3.                icon:’icon.png’,   
  4.                dir:’auto’  
  5.              }   
  6. var notification = new Notification(“Here I am!”,config);   
  7. setTimeout(function(){   
  8.     notification.close(); //closes the notification   
  9. },5000);   
  10.   

该说的东西就这些了。如果你意犹未尽,希望更加深入地了解Notification
API,可以阅读以下的页面:

    MDN
    Paul lund’s tutorial on notification API

在CodePen上查看demo

你可以在CodePen上看到由Prakash (@imprakash)编写的demo。

API制作web通知的教程,html5notification
这篇文章主要介绍了使用HTML5的Notification
API制作web通知的教程,示例包括需要使用到…

点评:HTML5的强大之一就是允许web程序申请一些临时或者永久的空间(Quota)在这里可以进行数据的存储甚至文件的操作

原文地址:

原文地址:

确保浏览器支持

如果你在特定版本的浏览器上进行开发,那么我建议你先到
caniuse
查看浏览器对Notification
API的支持情况,避免你将宝贵时间浪费在了一个无法使用的API上。

HTML5的强大之一就是允许web程序申请一些临时或者永久的空间(Quota)在这里可以进行
数据的存储甚至文件的操作。

前言

Notification API 是 HTML5 新增的桌面通知
API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。

前言

Notification API 是 HTML5 新增的桌面通知
API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。

如何开始

JavaScript

var notification=new Notification(‘Notification Title’,{ body:’Your
Message’ });

1
2
3
var notification=new Notification(‘Notification Title’,{
    body:’Your Message’
});

上面的代码构造了一个简陋的通知栏。构造函数的第一个参数设定了通知栏的标题,而第二个参数则是一个option
对象,该对象可设置以下属性:

  • body :设置通知栏的正文内容。
  • dir
    :定义通知栏文本的显示方向,可设为auto(自动)、ltr(从左到右)、rtl(从右到左)。
  • lang
    :声明通知栏内文本所使用的语种。(译注:该属性的值必须属于BCP 47
    language tag。)
  • tag:为通知栏分配一个ID值,便于检索、替换或移除通知栏。
  • icon :设置作为通知栏icon的图片的URL

FileSystem提供了文件夹和文件的创建、移动、删除等操作,大大方便了数据的本地处理,
而且所有的数据都是在沙盒(sandboxed)中,不同的web程序不能互相访问,这就保证了数据
的完整和安全。

用户权限

想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获取一次权限。只有用户允许的权限下,Notification
才能起到作用,避免某些网站的广告滥用 Notification
或其它给用户造成影响。那么如何知道用户到底是允不允许的?

Notification.permission
该属性用于表明当前通知显示的授权状态,可能的值包括:

  • default :不知道用户的选择,默认。
  • granted :用户允许。
  • denied :用户拒绝。

if(Notification.permission === 'granted'){
    console.log('用户允许通知');
}else if(Notification.permission === 'denied'){
    console.log('用户拒绝通知');
}else{
    console.log('用户还没选择,去向用户申请权限吧');
}

用户权限

想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获取一次权限。只有用户允许的权限下,Notification
才能起到作用,避免某些网站的广告滥用 Notification
或其它给用户造成影响。那么如何知道用户到底是允不允许的?

Notification.permission
该属性用于表明当前通知显示的授权状态,可能的值包括:

  • default :不知道用户的选择,默认。
  • granted :用户允许。
  • denied :用户拒绝。

    if(Notification.permission === ‘granted’){

    console.log('用户允许通知');
    

    }else if(Notification.permission === ‘denied’){

    console.log('用户拒绝通知');
    

    }else{

    console.log('用户还没选择,去向用户申请权限吧');
    

    }

获取权限

在显示通知栏之前需向用户申请权限,只有用户允许,通知栏才可出现在屏幕中。对权限申请的处理将有以下返回值:

  • default:用户处理结果未知,因此浏览器将视为用户拒绝弹出通知栏。(“浏览器:你没要求通知,我就不通知你了”)
  • denied:用户拒绝弹出通知栏。(“用户:从我的屏幕里滚开”)
  • granted:用户允许弹出通知栏。(“用户:欢迎!我很高兴能够使用这个通知功能”)
JavaScript

Notification.requestPermission(function(permission){ //display
notification here making use of constructor });

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f063d76a49818832322-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f063d76a49818832322-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f063d76a49818832322-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f063d76a49818832322-1" class="crayon-line">
Notification.requestPermission(function(permission){
</div>
<div id="crayon-5b8f063d76a49818832322-2" class="crayon-line crayon-striped-line">
//display notification here making use of constructor
</div>
<div id="crayon-5b8f063d76a49818832322-3" class="crayon-line">
});
</div>
</div></td>
</tr>
</tbody>
</table>

用HTML创建一个按钮

XHTML

<button id=”button”>Read your notification</button>

1
<button id="button">Read your notification</button>

不要忘记了CSS

CSS

#button{ font-size:1.1rem; width:200px; height:60px; border:2px solid
#df7813; border-radius:20px/50px; background:#fff; color:#df7813; }
#button:hover{ background:#df7813; color:#fff; transition:0.4s ease;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#button{
  font-size:1.1rem;
  width:200px;
  height:60px;
  border:2px solid #df7813;
  border-radius:20px/50px;
  background:#fff;
  color:#df7813;
}
#button:hover{
  background:#df7813;
  color:#fff;
  transition:0.4s ease;
}

全部的Javascript代码如下:

JavaScript

document.addEventListener(‘DOMContentLoaded’,function(){
document.getElementById(‘button’).addEventListener(‘click’,function(){
if(! (‘Notification’ in window) ){ alert(‘Sorry bro, your browser is not
good enough to display notification’); return; }
Notification.requestPermission(function(permission){ var config = {
body:’Thanks for clicking that button. Hope you liked.’,
icon:”,
dir:’auto’ }; var notification = new Notification(“Here I am!”,config);
}); }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.addEventListener(‘DOMContentLoaded’,function(){
        document.getElementById(‘button’).addEventListener(‘click’,function(){
            if(! (‘Notification’ in window) ){
                alert(‘Sorry bro, your browser is not good enough to display notification’);
                return;
            }    
            Notification.requestPermission(function(permission){
                var config = {
                              body:’Thanks for clicking that button. Hope you liked.’,
                              icon:’https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png’,
                              dir:’auto’
                              };
                var notification = new Notification("Here I am!",config);
            });
        });
    });

从这段代码可以看出,如果浏览器不支持Notification API,在点击按钮时将会出现警告“兄弟,很抱歉。你的浏览器并不能很好地支持通知功能”(Sorry
bro, your browser is not good enough to display
notification)。否则,在获得了用户的允许之后,我们自制的通知栏便可以出现在屏幕当中啦。

为什么要让用户手动关闭通知栏?

对于这个问题,我们可以借助setTimeout函数设置一个时间间隔,使通知栏能定时关闭。

JavaScript

var config = { body:’Today too many guys got eyes on me, you did the
same thing. Thanks’, icon:’icon.png’, dir:’auto’ } var notification =
new Notification(“Here I am!”,config); setTimeout(function(){
notification.close(); //closes the notification },5000);

1
2
3
4
5
6
7
8
9
var config = {
               body:’Today too many guys got eyes on me, you did the same thing. Thanks’,
               icon:’icon.png’,
               dir:’auto’
             }
var notification = new Notification("Here I am!",config);
setTimeout(function(){
    notification.close(); //closes the notification
},5000);

该说的东西就这些了。如果你意犹未尽,希望更加深入地了解Notification
API,可以阅读以下的页面:

  • MDN
  • Paul lund’s tutorial on notification
    API

在CatWrite项目中,运用了HTML5的这个特性进行数据的存储,很是方便,只是目前来说只有
Chrome浏览器对FileSystem API支持的比较好,所以只能运行在Chrome浏览器中。

请求权限

当用户还没选择的时候,我们需要向用户去请求权限。Notification 对象提供了
requestPermission() 方法请求用户当前来源的权限以显示通知。

以前基于回调的语法已经弃用(当然在现在的浏览器中还是能用的),最新的规范已将此方法更新为基于
promise 的语法:

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用户允许通知');
    }else if(permission === 'denied'){
        console.log('用户拒绝通知');
    }
});

请求权限

当用户还没选择的时候,我们需要向用户去请求权限。Notification 对象提供了
requestPermission() 方法请求用户当前来源的权限以显示通知。

以前基于回调的语法已经弃用(当然在现在的浏览器中还是能用的),最新的规范已将此方法更新为基于
promise 的语法:

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用户允许通知');
    }else if(permission === 'denied'){
        console.log('用户拒绝通知');
    }
});

在CodePen上查看demo

你可以在CodePen上看到由Prakash
(@imprakash)编写的demo。

赞 收藏 2
评论

在完成这个功能的时候,查阅了很多资料,有一些资料是一年前的,但是随着浏览器版本的
变化,一些代码已经老化,在这里一一总结和整理。这里只列举了项目中用到的API,算是
对完成功能的一次梳理。

推送通知

获取用户授权之后,就可以推送通知了。

var notification = new Notification(title, options)

参数如下:

  • title:通知的标题
  • options:通知的设置选项(可选)。
    • body:通知的内容。
    • tag:代表通知的一个识别标签,相同tag时只会打开同一个通知窗口。
    • icon:要在通知中显示的图标的URL。
    • image:要在通知中显示的图像的URL。
    • data:想要和通知关联的任务类型的数据。
    • requireInteraction:通知保持有效不自动关闭,默认为false。

还有一些其他的参数,因为用不了或者没什么用这里就没必要说了。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧',
    tag: 'linxin',
    icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
    requireInteraction: true
})

通知消息的效果图如下:

图片 2

推送通知

获取用户授权之后,就可以推送通知了。

var notification = new Notification(title, options)

参数如下:

  • title:通知的标题
  • options:通知的设置选项(可选)。
    • body:通知的内容。
    • tag:代表通知的一个识别标签,相同tag时只会打开同一个通知窗口。
    • icon:要在通知中显示的图标的URL。
    • image:要在通知中显示的图像的URL。
    • data:想要和通知关联的任务类型的数据。
    • requireInteraction:通知保持有效不自动关闭,默认为false。

还有一些其他的参数,因为用不了或者没什么用这里就没必要说了。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧',
    tag: 'linxin',
    icon: 'http://blog.gdfengshuo.comvatar.jpg',
    requireInteraction: true
})

通知消息的效果图如下:

图片 3

关于作者:ElvisKang

图片 4

QQ:285273704微博:@康恺暄邮箱:elviskang@foxmail.com
个人主页 ·
我的文章 ·
10

图片 5

申请空间 为了进行数据的存储,必须要向浏览器进行申请,如果是永久存储还会向用户进行询问,只有
同意后才会继续执行。

关闭通知

从上面的参数可以看出,并没有一个参数用来配置显示时长的。我想要它 3s
后自动关闭的话,这时可以调用 close() 方法来关闭通知。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧'
})

setTimeout(function() {
    n.close();
}, 3000);

关闭通知

从上面的参数可以看出,并没有一个参数用来配置显示时长的。我想要它 3s
后自动关闭的话,这时可以调用 close() 方法来关闭通知。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧'
})

setTimeout(function() {
    n.close();
}, 3000);

首先必须要声明想要的权限。

事件

Notification 接口的 onclick属性指定一个事件侦听器来接收 click
事件。当点击通知窗口时会触发相应事件,比如打开一个网址,引导用户回到自己的网站去。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧',
    data: {
        url: 'http://blog.gdfengshuo.com'
    }
})
n.onclick = function(){
    window.open(n.data.url, '_blank');      // 打开网址
    n.close();                              // 并且关闭通知
}

事件

Notification 接口的 onclick属性指定一个事件侦听器来接收 click
事件。当点击通知窗口时会触发相应事件,比如打开一个网址,引导用户回到自己的网站去。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧',
    data: {
        url: 'http://blog.gdfengshuo.com'
    }
})
n.onclick = function(){
    window.open(n.data.url, '_blank');      // 打开网址
    n.close();                              // 并且关闭通知
}

代码如下:

应用场景

前面说那么多,其实就是为了用。那么到底哪些地方可以用到呢?

现在网站的消息提醒,大多数都是在消息中心显示个消息数量,然后发邮件告诉用户,这流程完全没有错。不过像我这种用户,觉得别人点个赞,收藏一下都要发个邮件提醒我,老是要去删邮件(强迫症),我是觉得挺烦的甚至关闭了邮件提醒。

当然这里并不是说要用 Notification,毕竟它和邮件的功能完全不一样。

我觉得比较适合的是新闻网站。用户浏览新闻时,可以推送给用户实时新闻。以腾讯体育为例,它就使用了
Notification API。在页面中引入了一个
notification2017_v0118.js,有兴趣可以看看别人是怎么成熟的使用的。

一进入页面,就获取授权,同时自己页面有个浮动框提示你允许授权。如果允许之后,就开始给你推送通知了。不过它在关闭标签卡的时候,通知也会被关闭,那是因为监听了页面
beforeunload 事件。

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();
}
if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);
}

应用场景

前面说那么多,其实就是为了用。那么到底哪些地方可以用到呢?

现在网站的消息提醒,大多数都是在消息中心显示个消息数量,然后发邮件告诉用户,这流程完全没有错。不过像我这种用户,觉得别人点个赞,收藏一下都要发个邮件提醒我,老是要去删邮件(强迫症),我是觉得挺烦的甚至关闭了邮件提醒。

当然这里并不是说要用 Notification,毕竟它和邮件的功能完全不一样。

我觉得比较适合的是新闻网站。用户浏览新闻时,可以推送给用户实时新闻。以腾讯体育为例,它就使用了
Notification API。在页面中引入了一个
notification2017_v0118.js,有兴趣可以看看别人是怎么成熟的使用的。

一进入页面,就获取授权,同时自己页面有个浮动框提示你允许授权。如果允许之后,就开始给你推送通知了。不过它在关闭标签卡的时候,通知也会被关闭,那是因为监听了页面
beforeunload 事件。

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();
}
if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);
}

window.requestFileSystem = window.requestFileSystem ||
window.webkitRequestFileSystem; //文件系统请求标识
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL ||
window.webkitResolveLocalFileSystemURL; //根据URL取得文件的读取权限

兼容

说到兼容,自然是倒下一大片,而且各浏览器的表现也会有点差异。移动端的几乎全倒,PC端的还好大多都能支持,除了IE。所以使用前,需要先检查一下浏览器是否支持
Notification。

兼容

说到兼容,自然是倒下一大片,而且各浏览器的表现也会有点差异。移动端的几乎全倒,PC端的还好大多都能支持,除了IE。所以使用前,需要先检查一下浏览器是否支持
Notification。

得到系统的权限后就可以向浏览器申请空间

更多文章:

更多文章:

代码如下:

window.requestFileSystem(window.PERSISTENT, //persistent(永久) or
temporary(临时)
1024*1024, //1M
onInitFs, //成功后的回调函数
errorHandler); //错误后的回调函数

回调函数

代码如下:

function onInitFs(fs){
fs.root.getDirectory(‘catwrite_documents’, {create: true},
function(dirEntry) {
console.log(‘You have just created the ‘ + dirEntry.name + ‘
directory.’);
}, errorHandler);
}
//错误回调
function errorHandler(err){
var msg = ‘An error occured: ‘;
switch (err.code) {
case FileError.NOT_FOUND_ERR:
msg += ‘File or directory not found’;
break;
case FileError.NOT_READABLE_ERR:
msg += ‘File or directory not readable’;
break;
case FileError.PATH_EXISTS_ERR:
msg += ‘File or directory already exists’;
break;
case FileError.TYPE_MISMATCH_ERR:
msg += ‘Invalid filetype’;
break;
default:
msg += ‘Unknown Error’;
break;
};
console.log(msg + err);
}

如果成功后悔调用OnInitFs回调函数,在里面用了getDirectory方法用来创建一个文件夹,这下面再说。

但是这是有个问题,这样做的话每次加载页面都会申请,这肯定不是我们想要的,我们要
的是在有数据的时候就可以读取数据。

判断是否申请过空间 所以我们需要读取浏览器的数据,看看是否已有存储。这就用到了另一个API:

代码如下:

void queryUsageAndQuota(
in DOMString url,
in EntryCallback successCallback,
in optional ErrorCallback errorCallback
);

这个API可以查询当前web的空间情况,如果成功的话就会调用successCallback回调函数
并把已用空间和全部空间作为参数传入方法中。如果失败则调去errorCallback。

代码如下:

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT,
function(used, remaining){
if(remaining == “”){
console.log(“未申请空间。”);
}else{
console.log(“已使用空间”+used);
console.log(“全部空间”+remaining);
}
},
errorHandler); </p> <p>

我们可以通过判断remaining参数来判断是否有申请空间,如果没有申请,则返回上一步申请空间。
如果已经有空间的话,则需要得到空间的跟文件,这样才能操作数据。

获取文件入口 FileSystem使用了特殊的文件系统和沙盒模式,在电脑上或者其他web中是无法访问沙盒中的文件的
,只能用对应的格式去访问。

在浏览器中输入:

?filesystem:
  

这样可以访问catcoder.com这个网站在本机永久数据,把persistent换成temporary则是读取临时空间。

然后我们就可以通过URL和对应API获取文件的入口(Lets you look up the entry
for a file or directory with a local URL)。

代码如下:

void resolveLocalFileSystemURL(
in DOMString url,
in EntryCallback successCallback,
in optional ErrorCallback errorCallback
);

下面就可以读取本机存储的数据了

代码如下:

var url = “filesystem:http://” + window.location.host +
“/persistent/catwrite_documents/”;
window.resolveLocalFileSystemURL(url,function(fileEntry){
console.log(fileEntry);
var dirReader = fileEntry.createReader();
var readEntries = function(){
dirReader.readEntries(function(results){
if(!results.length){
create_file_title(“默认文件”, “”);
console.log(“没有文件!”);
}else{
console.log(“读取到” + results.length + “个文件”);
for(var i = 0; i < results.length; i++){
console.log(results[i].name);
getFileContentByName(fileEntry, results[i].name);
}
}
},errorHandler);
};
readEntries();
},errorHandler);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图