/*
* @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, '&').
replace(/\"/g, '"').
replace(/</g, '<').
replace(/>/g, '>');
ls_val = localStorage[ls_key].replace(/&/g, '&').
replace(/\"/g, '"').
replace(/</g, '<').
replace(/>/g, '>').
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');
}
}));
