vue中使用localForage

介绍

localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。

安装

通过 npm 安装：

npm install localforage

或通过 bower：

bower install localforage

或者外部引用

<script src="localforage.js"></script>
<script>console.log('localforage is: ', localforage);</script>

数据 API

getItem(key, successCallback)

从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，getItem() 将返回 null。

localforage.getItem('somekey').then(function(value) {
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});

// 回调版本：
localforage.getItem('somekey', function(err, value) {
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
});

setItem(key, value, successCallback)

将数据保存到离线仓库。你可以存储如下类型的 JavaScript 对象：

• Array
• ArrayBuffer
• Blob
• Float32Array
• Float64Array
• Int8Array
• Int16Array
• Int32Array
• Number
• Object
• Uint8Array
• Uint8ClampedArray
• Uint16Array
• Uint32Array
• String

localforage.setItem('somekey', 'some value').then(function (value) {
    // 当值被存储后，可执行其他操作
    console.log(value);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});

// 不同于 localStorage，你可以存储非字符串类型
localforage.setItem('my array', [1, 2, 'three']).then(function(value) {
    // 如下输出 `1`
    console.log(value[0]);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});

// 你甚至可以存储 AJAX 响应返回的二进制数据
req = new XMLHttpRequest();
req.open('GET', '/photo.jpg', true);
req.responseType = 'arraybuffer';

req.addEventListener('readystatechange', function() {
    if (req.readyState === 4) { // readyState 完成
        localforage.setItem('photo', req.response).then(function(image) {
            // 如下为一个合法的 <img> 标签的 blob URI
            var blob = new Blob([image]);
            var imageURI = window.URL.createObjectURL(blob);
        }).catch(function(err) {
          // 当出错时，此处代码运行
          console.log(err);
        });
    }
});

在vue中main.js引用

// 存储数据库的使用
import localforage from 'localforage'

Vue.use(localforage)
Vue.prototype.$localforage = localforage
// 创建一个 默认的 IndexDB数据库挂载到全局
const sortDataBase = localforage.createInstance({
  name: 'sortDataBase'
})

Vue.prototype.$sortDataBase  = sortDataBase 
// console.info('默认数据库 sortDataBase  初始化成功，使用 this.$sortDataBase 调用')

页面中使用

localforageInit(){
		let _this=this	   
    // 应用拖拽之后，进行本地存储，数据格式是存储的id 
    //"[{\"type\":\"校内资源\",\"data\":[317,299,305,8,74,3,118,2,81,72]}]"

		_this.$sortDataBase.getItem('sortDataBase').then(function (value) {
		   let data=JSON.parse(value)||[]
		   let obj={
			    type:_this.title,
          data:_this.newList.map((v)=>{
            return v.id
          })
			}
			let index=data.findIndex(ele=>ele.type==_this.title)
			if(index==-1){
				data.push(obj)
			}else{
	        data[index]['data']=_this.newList.map((vs)=>{
	            return vs.id
	          })
			}
		   _this.$sortDataBase.setItem('sortDataBase', JSON.stringify(data))
		   
		}).catch(function (err) {
		})
		
	},

详细API可查看其官网