JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1>Storage max size test</h1>

note: total size of this test is limited 100MB.

<h2>localStorage</h2>

<button id="ls-max-start" class="start-button">test start</button>
<fieldset class="result">
<legend>Result</legend>
<pre id="ls-max-result">


</pre>
</fieldset>

<fieldset class="result">
<legend>Example result</legend>
MacBook 13" Alminium, Late 2008, 2.4GHz Core 2 Duo, 4GB
<pre>
userAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.102 Safari/534.13
message  : QUOTA_EXCEEDED_ERR QUOTA_EXCEEDED_ERR: DOM Exception 22
max size : 2.4912109375 [MB]
elapsed  : 2.683
KB/s     : 950.8013417815878

userAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; ja-jp) AppleWebKit/533.19.4 (KHTML, like Gecko) Version/5.0.3 Safari/533.19.4
message  : QUOTA_EXCEEDED_ERR QUOTA_EXCEEDED_ERR: DOM Exception 22
max size : 2.4912109375 [MB]
elapsed  : 0.003
KB/s     : 850333.3333333334

userAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
message  : NS_ERROR_DOM_QUOTA_REACHED Persistent storage maximum size reached
max size : 4.9814453125 [MB]
elapsed  : 21.842
KB/s     : 233.5408845343833
</pre>
</fieldset>

<h2>sessionStorage</h2>

<button id="ss-max-start" class="start-button">test start</button>
<fieldset class="result">
<legend>Result</legend>
<pre id="ss-max-result" class="result">


</pre>
</fieldset>

<fieldset class="result">
<legend>Example result</legend>
MacBook 13" Alminium, Late 2008, 2.4GHz Core 2 Duo, 4GB
<pre>
userAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.102 Safari/534.13
message  : QUOTA_EXCEEDED_ERR QUOTA_EXCEEDED_ERR: DOM Exception 22
max size : 2.4912109375 [MB]
elapsed  : 0.442
KB/s     : 5771.493212669683

userAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; ja-jp) AppleWebKit/533.19.4 (KHTML, like Gecko) Version/5.0.3 Safari/533.19.4
message  :...

CSS

body {
    padding-left:  12px;
    padding-right: 12px;
    font-family: Arial, sans-serif;
}
h1 {
    font-size: 250%;
    text-align: center;
    letter-spacing: .2em;
}
h2 {
    margin-top:  1.5em;
    margin-left: -12px;
    font-size: 150%;
    padding: 8px 0 8px 12px;
    border-top:    3px solid #666;
    border-bottom: 1px solid #666;
}
.start-button {
    color: white;
    font-size: 24px;
    height: 64px;
    background: -moz-linear-gradient(bottom, #000, #000 40%, #ccc);
    background: -webkit-gradient(linear, center bottom, center top, from(#000), color-stop(40%, #000), to(#ccc));
}
.result {
    background: #eee;
    margin-top: 1.5em;
    border: 1px solid #666;
}
.result legend {
    background: #eee;
    border: 1px solid #666;
    padding: 0.5em 1em 0.5em 1em;
    font-weight: bold;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.result pre {
    padding: 1em;
    background: #fff;
    border: 1px solid #999;
}

JavaScript

$(document).ready(function(){
    var oneKB = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
    var maxCount = 102400; // oneKB * maxCount = max byte size
    //var maxCount = 1000; // fixme

    $('#ls-max-start').bind('click', function() {
        var message = "";
        var maxSize = 0;
        var elapsed = 0;
        var kbps    = 0;
        var loop    = 0;

        if (window.localStorage) {
            var now = Date.now();
            try {
                localStorage.clear();
                for (loop = 0; loop < maxCount; loop++) {
                    localStorage[loop] = oneKB;
                }
            } catch (ex) {
                message = ex.name+" "+ex.message;
            } finally {
                elapsed = (Date.now() - now)/1000;
                maxSize = loop; // # [KB]
                if (loop === maxCount) {
                    message = "reach max count successfully";
                }

                kbps = maxSize / elapsed;
                if (maxSize < 1024) {
 ...