Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
    <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>
    <pre id="pre_c"></pre>
    <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" src="https://unpkg.com/yux-storage"></script>  
  <script type="module">
        window.gets = (key) => {
            yuxStorage.getItem(key).then(res => {
                console.log(key, '=>', res)
                new LightTip().success(JSON.stringify(key)+': '+Object.prototype.toString.call(res)+ ' '+JSON.stringify(res));
            }).catch(err => {
                console.log(err)
                new LightTip().error(JSON.stringify(err));
            })
        }
​
        window.sets = (key, value) => {
            yuxStorage.setItem(key, value).then(res => {
                console.log(key, '设置完成')
                new LightTip().success('设置完成');
            }).catch(err => {
                console.log(err)
                new LightTip().error(JSON.stringify(err));
            })
        }
​
        window.removes = (key) => {
            yuxStorage.removeItem(key).then(res => {
                console.log(key, '已被移除')
                new LightTip().success(JSON.stringify(key)+'已被移除');
            }).catch(err => {
                console.log(err)
                new LightTip().error(JSON.stringify(err));
            })
        }
​
        window.clearStorage = () => {
            yuxStorage.clear().then(res => {
                console.log('数据已清空')
                new LightTip().success('数据已清空');
            }).catch(err => {
                console.log(err)
                new LightTip().error(JSON.stringify(err));
            })
        }
​
        window.key = (index) => {
            yuxStorage.key(index).then(res => {
                console.log(index, '=>', res)
                new LightTip().success(`第${index}个键: `+JSON.stringify(res));
            })
        }
​
        window.keys = () => {
            yuxStorage.keys().then(res => {
                console.log('全部键', res)
                new LightTip().success('全部键: '+JSON.stringify(res));
            }).catch(err => console.log(err))
        }
​
        yuxStorage.addEventListener((type, data) => {
            console.log(type, data)
            pre_c.innerHTML = JSON.stringify(data)
        })
​
        document.addEventListener('yuxStorage', ev => {
            const [type, detail] = ev.detail;
            console.log(type, detail)
        })
    </script>
</body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
XboxYanpro
0viewers