yued-fe / Yux Storage
Licence: mit
yux-storage 是一个基于 HTML5 IndexedDB 封装的 Web 本地数据离线存储库
Stars: ✭ 64
Projects that are alternatives of or similar to Yux Storage
Simple Fs
Handles files on indexeddb like you would do in node.js (promise)
Stars: ✭ 111 (+73.44%)
Mutual labels: promise, indexeddb
Elemental2
Type checked access to browser APIs for Java code.
Stars: ✭ 115 (+79.69%)
Mutual labels: promise, indexeddb
Create Request
Apply interceptors to `fetch` and create a custom request function.
Stars: ✭ 34 (-46.87%)
Mutual labels: promise
Fritzbox.js
☎️ The leading AVM Fritz!Box API for NodeJS and JavaScript.
Stars: ✭ 36 (-43.75%)
Mutual labels: promise
Angular1 Async Filter
Angular2 async pipe implemented as Angular 1 filter to handle promises & RxJS observables
Stars: ✭ 59 (-7.81%)
Mutual labels: promise
Node Qiniu Sdk
七牛云SDK,使用 ES2017 async functions 来操作七牛云,接口名称与官方接口对应,轻松上手,文档齐全
Stars: ✭ 44 (-31.25%)
Mutual labels: promise
Bluebird Api
Bluebird compatible API on top of native promises.
Stars: ✭ 36 (-43.75%)
Mutual labels: promise
Gollback
Go asynchronous simple function utilities, for managing execution of closures and callbacks
Stars: ✭ 55 (-14.06%)
Mutual labels: promise
Nodespider
[DEPRECATED] Simple, flexible, delightful web crawler/spider package
Stars: ✭ 33 (-48.44%)
Mutual labels: promise
Node Pg Async
PostgreSQL 🐘 client for node.js designed for easy use with ES7 async/await based on node-postgres
Stars: ✭ 41 (-35.94%)
Mutual labels: promise
Fastonosql
FastoNoSQL is a crossplatform Redis, Memcached, SSDB, LevelDB, RocksDB, UnQLite, LMDB, ForestDB, Pika, Dynomite, KeyDB GUI management tool.
Stars: ✭ 1,001 (+1464.06%)
Mutual labels: indexeddb
yux-storage
yux-storage 是一个基于 HTML5 IndexedDB 封装的 Web 本地数据离线存储库。
特点
- 使用类似 localStorage API, 无需考虑 IndexedDB 的复杂概念,上手无压力。
- 支持回调和 Promise 两种方式,各凭所愿。
- 无任何依赖,非常轻量,100 行左右的源码,压缩后更小。
以下是继承 IndexedDB 的特点
- 可以存储多种类型的数据,而不仅仅是字符串,无需序列化处理。
- 储存空间大,一般来说不少于 250MB,甚至没有上限。
- 异步操作,在进行大量数据存取时不会阻塞应用程序。
快速开始
安装
- 直接在 github 获取 yux-storage.js (推荐)
<script src="yux-storage.js"></script>
- 直接使用 unpkg 在线链接
<script src="https://unpkg.com/yux-storage"></script>
- 通过 npm 安装
npm i yux-storage
使用
通过 script 引用,会得到一个全局变量 yuxStorage
通过 npm 安装,需要 import 导入
import yuxStorage from 'yux-storage';
在页面中使用
// 回调函数
yuxStorage.getItem('key',function(err,value){
if (err) {
console.log('出错了')
// 类似于 nodejs 回调格式
} else {
console.log(value)
}
})
// 同样支持promise
yuxStorage.setItem('key').then(doSomethingElse)
// 如果你的环境支持async,那么
const value = await yuxStorage.getItem('key')
console.log(value)
测试用例
可访问 yux-storage测试用例,建议打开控制台哦(记得打开右上角Auto-run JS)~
另外可访问这里,需要打开控制台查看
错误处理
一般情况下报错都是参数不合法导致,例如设置添加一个键为Object
的操作
DOMException: Failed to execute 'get' on 'IDBObjectStore': The parameter is not a valid key.
以下 err 为错误信息
- 回调函数直接通过第一个参数判断
// 回调函数
yuxStorage.getItem('key',function(err,value){
if (err) {
console.log('出错了',err)
} else {
console.log(value)
}
})
- promsie 可以通过catch来捕获
yuxStorage.getItem('key').then(function(key) {
console.log(key);
}).catch(err => {
console.log('出错了',err)
})
- async/await 可以通过 try...catch 来捕获
try {
const key = await yuxStorage.getItem('key');
} catch (error) {
console.log('出错了',err)
}
API
获取或设置离线仓库中的数据的 API。风格参考 localStorage API
GETITEM
yuxStorage.getItem(key, callback)
从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key
不存在,getItem()
将返回 undefined
。
所有回调函数的第一个参数为错误信息,如果为
false
,说明设置正常
示例
yuxStorage.getItem('somekey').then(function(value) {
// 当离线仓库中的值被载入时,此处代码运行
console.log(value);
})
// async版本:
const value = await yuxStorage.getItem('somekey');
// 当离线仓库中的值被载入时,此处代码运行
console.log(value);
// 回调版本:
yuxStorage.getItem('somekey', function(err,value) {
// 当离线仓库中的值被载入时,此处代码运行
console.log(err, value);
});
SETITEM
yuxStorage.setItem(key, value, callback)
将数据保存到离线仓库。你可以存储如下类型的 JavaScript 对象:
- Array
- ArrayBuffer
- Blob
- Float32Array
- Float64Array
- Int8Array
- Int16Array
- Int32Array
- Number
- Object
- Uint8Array
- Uint8ClampedArray
- Uint16Array
- Uint32Array
- String
可能不太完整,理论上支持任意格式的数据,不能是 function
示例
yuxStorage.setItem('somekey', 'some value').then(function (value) {
// 当值被存储后,可执行其他操作
console.log(value);
})
// 不同于 localStorage,你可以存储非字符串类型(强烈推荐,无需序列化处理)
yuxStorage.setItem('my array', [1, 2, 'three']).then(function(value) {
// 如下输出 `1`
console.log(value[0]);
})
// 键名也可以是数组或者数字(不推荐,一般用字符串就足够了)
yuxStorage.setItem([1,2,3], [1, 2, 'three'])
// 还可以存储 file 文件
const file = new File(["foo"], "foo.txt", {
type: "text/plain",
});
yuxStorage.setItem('file', file)
// 报错,不能是function
yuxStorage.setItem('file', function(){})
REMOVEITEM
yuxStorage.removeItem(key, callback)
从离线仓库中删除 key 对应的值。
示例
yuxStorage.removeItem('somekey').then(function() {
// 当值被移除后,此处代码运行
console.log('Key is cleared!');
})
CLEAR
yuxStorage.clear(callback)
从数据库中删除所有的 key,重置数据库。
!小心使用,会删除所有数据
示例
yuxStorage.clear().then(function() {
// 当数据库被全部删除后,此处代码运行
console.log('Database is now empty.');
})
KEY
yuxStorage.key(keyIndex, callback)
根据 key 的索引获取其名,如果不存在返回 undefined
有些鸡肋的方法,很多时候我们不知道键的索引。
示例
yuxStorage.key(2).then(function(keyName) {
// key 名
console.log(keyName);
})
KEYS
yuxStorage.keys(callback)
获取数据仓库中所有的 key,如果不存在返回空数组[]
。
localStorage API 并没有这个方法,但比上面的 key 要有用的多。
示例
yuxStorage.keys().then(function(keyNames) {
// 所有的key名
console.log(keyNames);
})
兼容性
现代浏览器,包括移动端,不支持 IE
联系我
有相关问题或者意见可与我联系 [email protected]
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].