<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yux-storage测试用例</title>
<style>
body {
padding: 0 0.5em 100px;
background: #fff;
}
pre {
padding: 12px 1em;
margin: 1em 0;
background-color: #f5f7f9;
font-family: Consolas, monospace;
font-size: 100%;
white-space: pre-wrap;
word-wrap: break-word;
border-radius: 4px;
box-shadow: inset 1px 0 #e3e5e8, inset 0 1px #e3e5e8, inset -1px 0 #eaf0f5, inset 0 -1px #eaf0f5;
tab-size: 2;
}
blockquote {
font-family: 'kaiti', 'STKaiti';
border-left: solid silver;
background-color: #ffffe0;
padding: 0.5em 1em;
background-color: beige;
margin: 0;
}
button,input {
margin: 5px;
}
p {
font-size: 12px;
}
input[type="file" i]{
outline: 0;
}
input[type="file" i]::-webkit-file-upload-button{
display: none;
}
</style>
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/LightTip.css">
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Button.css">
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/LightTip.js"></script>
</head>
<body>
<h1>yux-storage</h1>
<blockquote>推荐打开控制台查看</blockquote>
<h2>getItem</h2>
<pre>yuxStorage.getItem('A').then(res => {
console.log(result)
});</pre>
<button class="ui-button" data-type="success" onclick="gets('A')">获取key：A</button>
<button class="ui-button" data-type="success" onclick="gets('B')">获取key：B</button>
<button class="ui-button" data-type="success" onclick="gets(['A','B'])">获取key：['A','B']</button>
<h2>setItem</h2>
<pre>yuxStorage.setItem(key, value)</pre>
<button class="ui-button" data-type="primary" onclick="sets('A', 1)">设置 A = 1</button>
<button class="ui-button" data-type="primary" onclick="sets('B', 2)">设置 B = 2</button>
<p>测试键为数组或者数字</p>
<button class="ui-button" data-type="primary" onclick="sets(['A','B'], 3)">设置 ['A','B'] = 3</button>
<button class="ui-button" data-type="primary" onclick="sets(1, 4)">设置 1 = 4</button>
<p>测试值为非字符串</p>
<button class="ui-button" data-type="primary" onclick="sets('C', [1,2])">设置 C = [1,2]</button>
<button class="ui-button" data-type="primary" onclick="sets('C', {name: 'xboxyan'})">设置 C = {name: 'xboxyan'}</button>
<button class="ui-button" data-type="primary" onclick="sets('C', Date())">设置 C = Date()</button>
<button class="ui-button" data-type="primary" onclick="sets('C', new Blob())">设置 C = new Blob()</button>
<button class="ui-button" data-type="primary" onclick="sets('C', new ArrayBuffer())">设置 C = new ArrayBuffer()</button>
<button class="ui-button" data-type="primary" onclick="sets('C', new RegExp())">设置 C = new RegExp()</button>
<button class="ui-button" data-type="primary" onclick="sets('C', new Float32Array())">设置 C = new Float32Array()</button>
<button class="ui-button" data-type="primary" onclick="sets('C', new Int16Array())">设置 C = new Int16Array()</button>
<button class="ui-button" data-type="primary" onclick="sets('C', new Uint16Array())">设置 C = new Uint16Array()</button>
<p>测试值为随意上传的文件，不限大小</p>
<label class="ui-button" data-type="primary" id="label" for="file">选择文件</label>
<input id="file" type="file" onchange="sets('C', event.target.files[0])" />
<p>获取上面的值</p>
<button class="ui-button" data-type="success" onclick="gets('C')">获取key：C</button>
<h2>removeItem</h2>
<pre>yuxStorage.removeItem(key)</pre>
<button class="ui-button" data-type="warning" onclick="removes('A')">删除 A</button>
<button class="ui-button" data-type="warning" onclick="removes('B')">删除 B</button>
<h2>key</h2>
<pre>yuxStorage.key(keyIndex)</pre>
<button class="ui-button" data-type="success" onclick="key(0)">第1个键</button>
<button class="ui-button" data-type="success" onclick="key(1)">第2个键</button>
<button class="ui-button" data-type="success" onclick="key(2)">第3个键</button>
<button class="ui-button" data-type="success" onclick="key(3)">第4个键</button>
<button class="ui-button" data-type="success" onclick="key(4)">第5个键</button>
<h2>keys</h2>
<pre>yuxStorage.keys().then(names => {
console.log(result)
};</pre>
<button class="ui-button" data-type="success" onclick="keys()">所有键</button>
<h2>clear</h2>
<pre>yuxStorage.clear()</pre>
<button class="ui-button" data-type="danger" onclick="clearStorage()">!清空全部数据</button>
<h2>错误捕获</h2>
<pre>// 回调函数
yuxStorage.getItem({},function(err,value){
if(err){
console.log(err)
}else{
console.log(value)
}
});
// promise
yuxStorage.getItem(key).then(value => {
console.log(value)
}).catch(err => console.log(err))</pre>
<p>参数不合法时会报错</p>
<button class="ui-button" data-type="success" onclick="gets({})">获取key：{}</button>
<button class="ui-button" data-type="primary" onclick="sets('M', function(){})">设置 M = function(){}</button>
<script type="module">
import yuxStorage from './yux-storage.js'
function equal(a, b) {
if (a === b) return true;
if (a && b && typeof a == 'object' && typeof b == 'object') {
if (a.constructor !== b.constructor) return false;
var length, i, keys;
if (Array.isArray(a)) {
length = a.length;
if (length != b.length) return false;
for (i = length; i-- !== 0;)
if (!equal(a[i], b[i])) return false;
return true;
}
if ((a instanceof Map) && (b instanceof Map)) {
if (a.size !== b.size) return false;
for (i of a.entries())
if (!b.has(i[0])) return false;
for (i of a.entries())
if (!equal(i[1], b.get(i[0]))) return false;
return true;
}
if ((a instanceof Set) && (b instanceof Set)) {
if (a.size !== b.size) return false;
for (i of a.entries())
if (!b.has(i[0])) return false;
return true;
}
if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
length = a.length;
if (length != b.length) return false;
for (i = length; i-- !== 0;)
if (a[i] !== b[i]) return false;
return true;
}
if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
keys = Object.keys(a);
length = keys.length;
if (length !== Object.keys(b).length) return false;
for (i = length; i-- !== 0;)
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
for (i = length; i-- !== 0;) {
var key = keys[i];
if (!equal(a[key], b[key])) return false;
}
return true;
}
// true if both NaN, false otherwise
return a!==a && b!==b;
};
function gets(key) {
yuxStorage.getItem(key).then(res => {
console.log(key, '=>', res)
基于 HTML5 IndexedDB 封装的 Web 本地数据离线存储库.zip
版权申诉
186 浏览量
2024-02-12
17:22:03
上传
评论
收藏 7KB ZIP 举报
基于 HTML5 IndexedDB 封装的 Web 本地数据离线存储库.zip （4个子文件） 
yux-storage-main 
yux-storage.js 4KB package.json 759B
index.html 8KB test.html 11KB资源评论
博士僧小星
- 粉丝: 1922
- 资源: 5884
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
