不多说,在弄一个基于FileSytem/IndexedDB的小应用,目前处于基础开发阶段,

我们在使用FileSystem的时候无疑是需要知道浏览器的定额(配额的),怎么去查询,当然可以查询 Quota Management API

个人觉得还是略有复杂,为了避免不停的then,同时更少的关注内部的区别,再简单包装了一下。

不多说,代码:

/**
* 参考的API:
* http://w3c.github.io/quota-api/
*
*/ //文件系统请求标识
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem
//根据URL取得文件的读取权限
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL //临时储存和永久存储
navigator.temporaryStorage = navigator.temporaryStorage || navigator.webkitTemporaryStorage;
navigator.persistentStorage = navigator.persistentStorage || navigator.webkitPersistentStorage; //常量
const _TEMPORARY = 'temporary', _PERSISTENT = 'persistent' /**
* 转为promise,主要是把 a.b(param1,param2,successCallback,errorCall) 转为promise
* @param {*期待的是函数} obj
* @param {*上下文} ctx
* @param {*参数} args
*/
function toPromise(obj, ctx, ...args) {
if (!obj) return obj //如果已经是Promise对象
if ('function' == typeof obj.then) return obj //若obj是函数直接转换
if ('function' == typeof obj) return _toPromise(obj) return obj; //函数转成 promise
function _toPromise(fn) {
return new Promise(function (resolve, reject) { fn.call(ctx, ...args, (...ags) => {
//多个参数返回数组,单个直接返回对象
resolve(ags && ags.length > 1 ? ags : ags[0])
}, (err) => {
reject(err)
}) })
}
} /**
* 查询和申请定额
* 测试脚本:
* 使用情况: FileStorageQuota.instance.queryInfo().then(data=>console.log(data))
* 申请空间: FileStorageQuota.instance.requestPersistentQuota().then(data=>console.log(data))
*/
class FileStorageQuota { constructor() { let supportedTypes = [_TEMPORARY, _PERSISTENT]; this.storageQuota = navigator.storageQuota || {
storages: { [_TEMPORARY]: navigator.webkitTemporaryStorage, [_PERSISTENT]: navigator.webkitPersistentStorage },
queryInfo: function (type) {
return toPromise(this.storages[type].queryUsageAndQuota, this.storages[type]).then(arr => {
return { usage: arr[0], quota: arr[1] }
})
},
requestPersistentQuota: function (requestQuota) {
return toPromise(this.storages[_PERSISTENT].requestQuota, this.storages[_PERSISTENT], requestQuota * 1024 * 1024).then(quota => {
return { quota }
})
},
supportedTypes
}
this.supportedTypes = supportedTypes
this._instance = null //实例
} /**
* 获得实例
*/
static get instance() {
return !!this._instance ? this._instance : this._instance = new FileStorageQuota()
} /**
* 已经分配的额度和适用查询
* @param {*类型 window.TEMPORAR(0) |window.PERSISTENT(1) } type
*/
queryInfo(type = window.TEMPORARY) { return new Promise((resolve, reject) => {
this.storageQuota.queryInfo(this.supportedTypes[type])
.then(storageInfo => resolve({ quota: this.tansferBytes(storageInfo.quota), usage: this.tansferBytes(storageInfo.usage) }))
.catch(this.errorHandler(reject))
}) } /**
* 请求配额,只有PERSISTENT才需要用户允许,
* 返回值是你请求的和已经分配的大值
* @param {* window.TEMPORAR(0) |window.PERSISTENT(1)} type
* @param {* 请求的配额大小} requestQuota
*/
async requestPersistentQuota(requestQuota = 5) {
let { quota: quotaM, usage } = await this.queryInfo(window.PERSISTENT)
if (requestQuota > quotaM) {
return new Promise((resolve, reject) =>
this.storageQuota.requestPersistentQuota(requestQuota * 1024 * 1024)
.then(storageInfo => {
return resolve({ quota: this.tansferBytes(storageInfo.quota), usage: this.tansferBytes(storageInfo.usage || usage) })
})
.catch(this.errorHandler(reject)))
}
return { quota: Math.max(requestQuota, quotaM), usage }
} /**
* 把bytes换算成KB,M,G等
* @param {* bytes的长度} bytesLength
* @param {* 转为目标的单位} target
*/
tansferBytes(bytesLength, target = 'M') {
let m = {
'Byte': 0,
'KB': 1,
'M': 2,
'G': 3
}
return bytesLength / Math.pow(1024, m[target] || 0)
} /**
* Promise里面的错误处理
* @param {*} reject
*/
errorHandler(reject) {
return (error) => {
reject(error)
}
}
}

测试:

FileStorageQuota.instance.queryInfo().then(data=>console.log(data))

Object {quota: 2767.7421379089355, usage: 22.347068786621094}

  

FileStorageQuota.instance.requestPersistentQuota().then(data=>console.log(data))

Object {quota: 10240, usage: 0}

源码地址:https://github.com/xiangwenhu/BlogCodes/tree/master/client/FileSystem

参考:

Quota Management API

StorageQuota - Web APIs | MDN

最新文章

  1. java 标识符命名规则
  2. Myeclipse 10.7 android(安卓) 开发环境搭建
  3. PAT-乙级-1023. 组个最小数 (20)
  4. [转] npm 模块安装机制简介
  5. iOS开发 自定义navigationleftItem 之后手势失效的问题
  6. IntelliJ IDEA使用(一)基本设置与类、方法模板设置
  7. parquet文件 读取 原理
  8. Java的selenium代码随笔(2)
  9. OUTLOOK2019 解决 无法验证您连接到的服务器使用的安全证书
  10. SpringCloud系列六:Feign接口转换调用服务(Feign 基本使用、Feign 相关配置)
  11. winform 写入txt
  12. 08 LaTeX学习系列之---Latex 的中文操作
  13. csu oj 1344: Special Judge
  14. 关于python开发CRM系统
  15. Maven POM
  16. python learning OOP1.py
  17. Django外键关系:一对一、一对多,多对多
  18. Yii2.0 发送邮件时中文附件乱码的问题
  19. 悦铃文件必须是CCITT A_Law格式的,且没有被压缩
  20. 20165330 2017-2018-2 《Java程序设计》第4周学习总结

热门文章

  1. json解析—Gson以及GsonFormat插件的运用
  2. 学习图像算法阶段性总结 (附一键修图Demo)
  3. Intent及IntentFilter具体解释
  4. 五:Java之Vector类专题
  5. F02 金融学第二定律 资金的积聚
  6. 八.利用springAMQP实现异步消息队列的日志管理
  7. iOS iOS10 的适配问题
  8. Python Web框架(URL/VIEWS/ORM)
  9. CP342-5做主站的profibus-dp组态应用
  10. es6 let和const命令(1)