• 计算localStorage总量/剩余容量


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>容量</title>
    </head>
    <body>
    <div class="use">
        使用:
    </div>
    <button class="btn1">获取使用</button>
    <hr />
    <div class="total">
        总数:
    </div>
    <button class="btn2">获取总数</button>
    <button class="btn3">暂停总数</button>
    <hr />
    <script>
        function getUseSize() {
            var size = 0;
            for(item in window.localStorage) {
                if(window.localStorage.hasOwnProperty(item)) {
                    size += window.localStorage.getItem(item).length;
                }
            }
            document.querySelector('.use').innerHTML = '使用:' +  (size / 1024).toFixed(2) + 'KB'
        }
    
        document.querySelector('.btn1').addEventListener('click', function () {
            getUseSize();
        })
    
        var timer
        function getTotalSize() {
            localStorage.clear();
            var test = '0123456789';
            var add = function(num) {
                num += num;
                if(num.length === 10240) {
                    test = num;
                    return;
                }
                add(num);
            }
            add(test);
            var sum = test;
            timer = setInterval(function(){
                sum += test;
                try {
                    localStorage.removeItem('test');
                    localStorage.setItem('test', sum);
                    document.querySelector('.total').innerHTML = '总数:' +  sum.length / 1024 + 'KB'
                } catch(e) {
                    alert(sum.length / 1024 + 'KB超出最大限制');
                    clearInterval(timer);
                }
            }, 0.1)
    
        }
    
        document.querySelector('.btn2').addEventListener('click', function () {
            getTotalSize();
        })
        document.querySelector('.btn3').addEventListener('click', function () {
            clearInterval(timer);
        })
    
    </script>
    </body>
    </html>
  • 相关阅读:
    云时代架构阅读笔记时十
    云时代架构”经典文章阅读感想九
    “云时代架构”经典文章阅读感想八
    antlr4
    Centos7定时脚本
    JDBC连接hive失败,一种原因的解决方法
    Linux实用操作命令
    secureCRT下载虚拟机文件到本地
    OpenFeign执行POST请求类型以及Python的requests.post()方法
    DataSphere安装配置
  • 原文地址:https://www.cnblogs.com/it-Ren/p/14587079.html
Copyright © 2020-2023  润新知