我们都知道js是不能访问系统上的文件的,因为浏览器的运行被限制在沙盒模型之中,但是chrome中的FileSystem api提供了对沙盒中文件操作的方法,有了这些方法,我们就可以把一些想保存的内容进行保存了,一起来看看怎么用吧。

临时存储vs持久存储

用FileSystem api存储文件的时候,主要有两种存储方式,临时和持久。临时存储的话,浏览器可以自行决定删除,例如空间不够的时候,就会把临时的文件删除。我们先来看一下一般的临时文件申请的写法:

上面的requestFileSystem就是请求文件系统,这个有4个参数,type,size,successBack,errorBack。其中type有window.TEMPORARY和window.PERSISTENT,size表示申请的空间。successBack表示成功回调,errorBack表示失败回调。

那么navigator.webkitTemporaryStorage.requestQuota又是干嘛的呢?这个是用来事先检查剩余空间的,例如上面事先请求1M的空间,那么这个方法会将可用大小返回回来,例如可用空间不足1M,那么将返回真实可用的大小。

如果想要申请持久存储,需要得到用户的同意,会弹出如下的一个申请页面:

我们来看一下申请一个持久存储的一般写法:

如果我们想看看现在临时或持久存储的空间情况(现在用了多少空间,还剩多少空间),那么可用如下代码:

文件写入

刚才上面大致讲了如何申请一个空间,那么我们现在来看看怎么写文件,先来一个最简单的,创建一个log.txt,然后随便写一点东西:

打开连接后,打开开发者工具,我们看到如下内容:

表示文件写入完成,那么在哪里看这个写好的内容呢?上图中有一个路径,复制那个路径(注意带前面的filesystem:)到chrome上就可以看到你刚才创建的文件了:

注:沙盒文件系统中不同域名的文件是互不可访问的,因此不用担心别的域名的代码可以访问到你的文件系统。

我们来看看写入的关键代码:

首先用getFile试着去获取文件,这里有两个常用的参数:create和exclusive,如果create:true,那么在没有文件的时候会创建文件(注意,有就会覆盖文件),如果这个时候文件存在,并且exclusive:true就会引发错误。

获取完文件就用createWriter来写入了,注意,这里写入的是blob,这里我们用new Blob创建了一个blob并写入。

追加写入文件

上面讲到了如何写入一个文件,现在我们来看一看如何在一个文件内容后面追加内容:

运行了几次之后,我们可以看到内容愈来越多了。

其实这个相比直接写入,只是多了一行代码:

写入本地的图片

上面都只是写入了简单的txt,那么如果想保存本地图片文件怎么做呢?先来看看下面的demo:

这个其实也很好理解,因为选择的文件属于fileBlob,可以直接写入。关键代码如下:

写入远程的图片

有些时候我们有一个图片的链接,但是我们想通过链接保存图片,怎么做呢?

想要获取远程的图片并保存,只要能够得到图片的blob就好说,这里可以用ajax请求,设置responseType为blob就可以得到图片的blob,然后保存就可以了。关键代码如下:

文件读取

刚才我们一直都在写入文件,现在让我们来读取一下文件:

文件读取用到FileReader读取文件,关键代码如下:

图片读取

如果我们想读取保存在文件系统中的图片如何操作?

这里主要用到了FileEntry.toURL()将blob转换成真正的沙盒图片地址,关键代码如下:

如果想把沙盒地址变成FileEntry,代码如下:

目录创建

文件删除

注意,删除的时候create为false。

删除空目录

删除非空目录

最后

还有移动,重命名等操作,这里就不复制粘贴了,具体的可以自行百度查看。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字