localStorage Info lite

    
      
  • /*
     * @title localStorage Info lite
     * @description 【スマホ】ローカルストレージを確認することができます。
     * @license MIT License
    
    1.
    簡易版につき、値(ls_val)は5000文字までを表示しています。
    サイトによっては随分と大きなサイズのコードを含むJSONが格納されていることがあります。
    この制限を外す場合はご注意ください。
    例)https://ja.wikipedia.org/
    
    2.
    jQueryを読み込む部分は以下のサイトを参照しました。お世話様です。
    http://blog.mudatobunka.org/entry/2016/02/29/030633
    
    3.
    iOS10.3.3, iPhone 5s, Safariで確認。
    
     */
    
    void((function(f){
        if(window.jQuery && jQuery().jquery > '1.8') {// jQueryの存在とバージョンチェック
            f(jQuery);
        } else {
            var script = document.createElement('script');
            script.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js';
    //        script.src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js';
            script.onload = function(){
                var $ = jQuery.noConflict(true);
                f($);
            };
            document.body.appendChild(script);
        }
    })(function($, undefined){
        //---------------------------------------- main
        var count = window.localStorage.length;
        if (count > 0) {
            var ls_key;
            var ls_key_min;
            var ls_val;
            var ls_arr = [];
            var key_val = '';
            var trash = [];//selected_items list
            for (i = 0; i < count; i++) {
                ls_key = localStorage.key(i);
                ls_key_min = ls_key.replace(/&/g, '&amp;').
                    replace(/\"/g, '&quot;').
                    replace(/</g, '&lt;').
                    replace(/>/g, '&gt;');
                ls_val = localStorage[ls_key].replace(/&/g, '&amp;').
                    replace(/\"/g, '&quot;').
                    replace(/</g, '&lt;').
                    replace(/>/g, '&gt;').
                    replace(/\//g, '\\/').
                    slice(0,5000);
                ls_arr.push('<label><input type="checkbox" value="' + ls_key_min + '"> ' + ls_key_min + 
                    ' <span style="color:red;">-></span> ' + ls_val + '</label>');
                key_val += ls_arr[i];
            }
            
            //overlay
            $('body').append('<div id="overlay" style="display:none"></div>');
            $('#overlay').css({
                'z-index': 9999998,
                position: 'fixed',
                top: 0,
                left: 0,
                width: '3000px',
                height: '1200px',
                'background': 'rgba(0,0,0,0.6)'
            });
            $('#overlay').fadeIn('12000');
    
            //modal window
            $('body').prepend('<div id="modal" style="display:none">' + 
                '<div id="hh1">localStorage <span id="count">#' + count + '</span></div>' + 
                '<div id="check_all"><label><input type="checkbox"> check all</label></div>' + 
                '<div id="key_val_list">' + key_val + '</div>' +
                '<div id="delete_btn">Delete</div>' + 
            '</div>');
    
            $('#modal').css({
                background: '#fcf8e3',
                'margin-top':'30px',
                padding: 0,
                color: '#8a6d3b',
                'font-family': '-apple-system, Sans-Serif',
                'font-size': '10pt',
                'font-weight': 'normal',
                'letter-spacing':'normal',
                width: $(window).width() - 24,
                height: $(window).height() -120,
                border: '4px solid #faebcc',
                'border-radius': '4px',
                position: 'fixed',
                top: '30px',
                left: '8px',
                'z-index': 9999999
            });
    
            $('#hh1').css({
                background: '#faebcc',
                margin: 0,
                padding: '0.4em',
                color: '#555',
                'font-size': '12pt',
                'font-weight': 'bold',
                'text-align': 'center'
            });
    
            $('#check_all').css({
                background: '#fcf8e3',
                margin: 0,
                padding: '0.6em 0 0 0.5em',
                'text-align': 'left'
            });
            $('#check_all label').css({
                'line-height': '1.5em',
                'font-weight': 'normal'
            });
    
            $('#delete_btn').css({
                width: '6em',
                background: '#fcf8e3',
                margin: '1.4em auto',
                padding: 0,
                color: '#555',
                'font-size': '10pt',
                'font-weight': 'bold',
                'text-align': 'center',
                'border': 0,
                'outline': 'none',
                'appearance': 'none'
            });
            
            $('#key_val_list').css({
                'overflow': 'auto',
                '-webkit-overflow-scrolling': 'touch',
                background: '#fcf8e3',
                margin: 0,
                padding: '2px 0 0 0',
                width: $('#modal').width() ,
                height: $('#modal').height() - 122,
                border: 0,
                'border-top': '2px solid #faebcc',
                'border-bottom': '2px solid #faebcc',
                'text-align': 'left',
            });
            $('#key_val_list label').css({
                margin: 0,
                padding: '0 0 0 0.5em',
                color: '#555',
                'font-family': '-apple-system, Sans-Serif',
                'font-size': '10pt',
                'font-weight': 'normal',
                'line-height': '1.5em',
                'display': 'block',
                'word-wrap': 'break-word'
            });
            //stripe
            $('#key_val_list label:odd').css({'background': '#f5f5f5'});
    
            $('#modal').fadeIn('12000');
    
    
            //---------------------------------------  on('click', function())
            //check_all BTN
            $('#check_all input').on('click', function () {
                $('#key_val_list input').prop('checked', this.checked);
            });
    
            //key_val_list checkbox
            $('#key_val_list input').on('click', function () {
                if ($('#key_val_list input:checked').length == $('#key_val_list input').length) {
                    $('#check_all input').prop('checked', true);
                } else {
                    $('#check_all input').prop('checked', false);
                }
            });
    
            //delete BTN
            $('#delete_btn').on('click', function () {
                trash = $('#key_val_list input:checked').map(function () {
                    return $(this).val();//checked items -> arr
                }).get();
    
                //selected items count
                if (trash.length > 0 && window.confirm(
                    'Are you sure you want to permanently delete the selected items?'
    //                '選択した項目を削除してもよろしいですか?\nこの操作は取り消せません。'
                )) {
                    for (i = 0; i < trash.length; i++) {
                        localStorage.removeItem(trash[i]);
                    }
                    //HTML update
                    if(window.localStorage.length > 0){
                        $('#count').html('#' + window.localStorage.length);
                    } else {
                        //No Data
                        $('#count').html('');
                        $('#delete_btn').html('No Data');
                        $('#check_all, #key_val_list').html('');
                        $('#key_val_list').css('border', 0);
                    }
                    $('#key_val_list input:checked').parent().remove();
    
                    //stripe
                    $('#key_val_list label:even').css({'background': '#fcf8e3'});
                    $('#key_val_list label:odd').css({'background': '#f5f5f5'});
    
                }
            });
            
            //fadeout
            $('#overlay').on('click', function () {
                $('#modal, #overlay').fadeOut('12000', function () {
                    $('#overlay, #modal').remove();
                });
            });
        } else {
            //Data not Found
            alert('localStorage Data not Found');
        }
    }));
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2017/08/06 11:36:26 - 2017-08-06