电子书实现离线缓存

浏览器存储特点

浏览器存储方案，都不适合储存大量数据：Cookie的大小不超过4KB，且每次请求都会发送回服务器，LocalStorage在2.5MB到10MB之间，而且不提供搜索功能，不能建立自定义索引。

所以这里我们使用IndexedDB进行缓存，IndexDB就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexDB允许储存大量数据，提供查找接口，还能建立索引。这些都是LocalStorage不具备的。就数据库类型而言，IndexDB不属于关系型数据库（不支持SQL查询语句），更接近NoSQL数据库。

localForage库简介

set方法

localForage全部采用异步方法，这里是设置item,如果成功调用回调函数cb，失败调用回调函数cb2

---

get方法

---

remove方法

将传入的key值删除

---

清空，将整个LocalStoragee中数据清空

---

长度遍历，获取LocalStorage中有多少个ke

---

遍历并获取元素的key和valu

---

判断当前浏览器是否支持IndexDB

---

实操

我们这里要用到localForage库对IndexDB进行操作。

1.先设置一个本地变量

2.实现download的API

export function download (book, onSucess, onError,
                          onProgress) {
  if (!onProgress) {
    onProgress = onError
  } 
  return axios.create({
    baseURL: process.env.VUE_APP_EPUB_URL,
    method: 'get',
    responseType: 'blob',
    timeout: 180 * 100
  }).get(`${book.categoryText}/${book.fileName}.epub`).then(res => {
      if(onSucess) onSucess(res)
  })
}

3.下载方法

methods: {
  downloadSelectedBook() {
    for(let i=0;i<this.shelfSelected.length;i++) {
      this.downloadBook(this.shelfSelected[i])
    }
  },
  downloadBook(book) {
    return new Promise((resolve, reject) => {
      download(book, res => {
        console.log(res)
      })
    })
  }
}

结果图

下载成功，是一个Blob对象