☰

Local Storage Viewer

View local storage keys and their values

  1. // ==UserScript==
  2. // @name         Local Storage Viewer
  3. // @namespace   Violentmonkey Scripts
  4. // @version      1.01
  5. // @description  View local storage keys and their values
  6. // @license MIT
  7. // @author       H17S3/Spartanian
  8. // @match        http://*/*
  9. // @match        https://*/*
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.  
  16.     var container = document.createElement('div');
  17.     container.style.position = 'fixed';
  18.     container.style.top = '10px';
  19.     container.style.right = '10px';
  20.     container.style.width = '400px';
  21.     container.style.maxHeight = '500px';
  22.     container.style.overflow = 'auto';
  23.     container.style.background = '#2b2b2b';
  24.     container.style.border = '1px solid #555';
  25.     container.style.borderRadius = '5px';
  26.     container.style.zIndex = '9999';
  27.     container.style.fontFamily = 'Roboto, Arial, sans-serif';
  28.     container.draggable = true;
  29.  
  30.     var header = document.createElement('div');
  31.     header.style.padding = '10px';
  32.     header.style.cursor = 'move';
  33.     header.style.background = '#222';
  34.     header.style.borderBottom = '1px solid #555';
  35.     header.style.borderRadius = '5px 5px 0 0';
  36.     header.style.color = '#fff';
  37.     header.style.fontSize = '18px';
  38.     header.style.fontWeight = 'bold';
  39.     header.textContent = 'Local Storage Viewer';
  40.     header.style.fontFamily = 'Roboto, Arial, sans-serif';
  41.     container.appendChild(header);
  42.  
  43.     var content = document.createElement('div');
  44.     content.style.padding = '10px';
  45.     content.style.color = '#fff';
  46.     container.appendChild(content);
  47.  
  48.     var isDragging = false;
  49.     var startX = 0;
  50.     var startY = 0;
  51.  
  52.     header.addEventListener('mousedown', function (event) {
  53.         isDragging = true;
  54.         startX = event.clientX - container.offsetLeft;
  55.         startY = event.clientY - container.offsetTop;
  56.     });
  57.  
  58.     document.addEventListener('mouseup', function () {
  59.         isDragging = false;
  60.     });
  61.  
  62.     document.addEventListener('mousemove', function (event) {
  63.         if (isDragging) {
  64.             container.style.left = (event.clientX - startX) + 'px';
  65.             container.style.top = (event.clientY - startY) + 'px';
  66.         }
  67.     });
  68.  
  69.  
  70.     for (var i = 0; i < localStorage.length; i++) {
  71.         var key = localStorage.key(i);
  72.         var value = localStorage.getItem(key);
  73.         var dataType = typeof value;
  74.  
  75.         var item = document.createElement('div');
  76.         item.style.marginBottom = '10px';
  77.  
  78.         var dropdownButton = document.createElement('span');
  79.         dropdownButton.textContent = '▼';
  80.         dropdownButton.style.cursor = 'pointer';
  81.         dropdownButton.style.fontFamily = 'Roboto, Arial, sans-serif';
  82.         dropdownButton.style.marginRight = '5px';
  83.         dropdownButton.addEventListener('click', createDropdownHandler(item, dropdownButton));
  84.         item.appendChild(dropdownButton);
  85.  
  86.         var keyElement = document.createElement('span');
  87.         keyElement.textContent = key;
  88.         keyElement.style.fontWeight = 'bold';
  89.         keyElement.style.fontFamily = 'Roboto, Arial, sans-serif';
  90.         keyElement.style.marginRight = '5px';
  91.         item.appendChild(keyElement);
  92.  
  93.         var valueElement = document.createElement('pre');
  94.         valueElement.innerHTML = formatValue(value);
  95.         valueElement.style.marginLeft = '15px';
  96.         valueElement.style.display = 'none';
  97.         valueElement.style.whiteSpace = 'pre-wrap';
  98.         valueElement.style.fontFamily = 'Roboto, Arial, sans-serif';
  99.         valueElement.style.wordWrap = 'break-word';
  100.         item.appendChild(valueElement);
  101.  
  102.         if (dataType === 'object') {
  103.             dropdownButton.style.visibility = 'visible';
  104.         }
  105.  
  106.         content.appendChild(item);
  107.     }
  108.  
  109.     function createDropdownHandler(item, dropdownButton) {
  110.         return function () {
  111.             var valueElement = item.querySelector('pre');
  112.             if (item.classList.contains('expanded')) {
  113.                 item.classList.remove('expanded');
  114.                 dropdownButton.textContent = '▼';
  115.                 valueElement.style.display = 'none';
  116.             } else {
  117.                 item.classList.add('expanded');
  118.                 dropdownButton.textContent = '▲';
  119.                 valueElement.style.display = 'block';
  120.                 colorizeNumbersAndBooleans(valueElement);
  121.             }
  122.         };
  123.     }
  124.  
  125.     function formatValue(value) {
  126.         try {
  127.             var parsedValue = JSON.parse(value);
  128.             return JSON.stringify(parsedValue, null, 4);
  129.         } catch (error) {
  130.             return value;
  131.         }
  132.     }
  133.  
  134.  
  135.     function colorizeNumbersAndBooleans(valueElement) {
  136.         var text = valueElement.innerHTML;
  137.         text = text.replace(/"(true|false)"/g, '<span style="color:#77D72F;">$1</span>');
  138.         text = text.replace(/"([^"]*)"/g, '<span style="color: #77D72F;">"$1"</span>');
  139.         text = text.replace(/\b(\d+(?:\.\d+)?)\b/g, '<span style="color: #f39c12;">$1</span>');
  140.         valueElement.innerHTML = text;
  141.     }
  142.  
  143.     document.body.appendChild(container);
  144.  
  145.     var toggleButton = document.createElement('button');
  146.     toggleButton.style.position = 'fixed';
  147.     toggleButton.style.top = '10px';
  148.     toggleButton.style.left = '10px';
  149.     toggleButton.style.padding = '10px';
  150.     toggleButton.style.background = '#2b2b2b';
  151.     toggleButton.style.border = '1px solid #555';
  152.     toggleButton.style.borderRadius = '5px';
  153.     toggleButton.style.zIndex = '9999';
  154.     toggleButton.style.color = '#fff';
  155.     toggleButton.style.fontFamily = 'Roboto, Arial, sans-serif';
  156.     toggleButton.textContent = 'Toggle GUI';
  157.  
  158.     toggleButton.addEventListener('click', function () {
  159.         if (container.style.display === 'none') {
  160.             container.style.display = 'block';
  161.         } else {
  162.             container.style.display = 'none';
  163.         }
  164.     });
  165.  
  166.     document.body.appendChild(toggleButton);
  167. })();