Local Storage Viewer

View local storage keys and their values

目前為 2024-02-20 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name Local Storage Viewer
  3. // @namespace Violentmonkey Scripts
  4. // @version 1.0
  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. container.appendChild(header);
  41.  
  42. var content = document.createElement('div');
  43. content.style.padding = '10px';
  44. content.style.color = '#fff';
  45. container.appendChild(content);
  46.  
  47. var isDragging = false;
  48. var startX = 0;
  49. var startY = 0;
  50.  
  51. header.addEventListener('mousedown', function (event) {
  52. isDragging = true;
  53. startX = event.clientX - container.offsetLeft;
  54. startY = event.clientY - container.offsetTop;
  55. });
  56.  
  57. document.addEventListener('mouseup', function () {
  58. isDragging = false;
  59. });
  60.  
  61. document.addEventListener('mousemove', function (event) {
  62. if (isDragging) {
  63. container.style.left = (event.clientX - startX) + 'px';
  64. container.style.top = (event.clientY - startY) + 'px';
  65. }
  66. });
  67.  
  68. for (var i = 0; i < localStorage.length; i++) {
  69. var key = localStorage.key(i);
  70. var value = localStorage.getItem(key);
  71. var dataType = typeof value;
  72.  
  73. var item = document.createElement('div');
  74. item.style.marginBottom = '10px';
  75.  
  76. var dropdownButton = document.createElement('span');
  77. dropdownButton.textContent = '▼';
  78. dropdownButton.style.cursor = 'pointer';
  79. dropdownButton.style.marginRight = '5px';
  80. dropdownButton.addEventListener('click', createDropdownHandler(item, dropdownButton));
  81. item.appendChild(dropdownButton);
  82.  
  83. var keyElement = document.createElement('span');
  84. keyElement.textContent = key;
  85. keyElement.style.fontWeight = 'bold';
  86. keyElement.style.marginRight = '5px';
  87. item.appendChild(keyElement);
  88.  
  89. var valueElement = document.createElement('pre');
  90. valueElement.innerHTML = formatValue(value);
  91. valueElement.style.marginLeft = '15px';
  92. valueElement.style.display = 'none';
  93. valueElement.style.whiteSpace = 'pre-wrap';
  94. valueElement.style.wordWrap = 'break-word';
  95. item.appendChild(valueElement);
  96.  
  97. if (dataType === 'object') {
  98. dropdownButton.style.visibility = 'visible';
  99. }
  100.  
  101. content.appendChild(item);
  102. }
  103.  
  104. function createDropdownHandler(item, dropdownButton) {
  105. return function () {
  106. var valueElement = item.querySelector('pre');
  107. if (item.classList.contains('expanded')) {
  108. item.classList.remove('expanded');
  109. dropdownButton.textContent = '▼';
  110. valueElement.style.display = 'none';
  111. } else {
  112. item.classList.add('expanded');
  113. dropdownButton.textContent = '▲';
  114. valueElement.style.display = 'block';
  115. colorizeNumbersAndBooleans(valueElement);
  116. }
  117. };
  118. }
  119.  
  120. function formatValue(value) {
  121. try {
  122. var parsedValue = JSON.parse(value);
  123. return JSON.stringify(parsedValue, null, 4);
  124. } catch (error) {
  125. return value;
  126. }
  127. }
  128.  
  129. function colorizeNumbersAndBooleans(valueElement) {
  130. var text = valueElement.innerHTML;
  131. text = text.replace(/"(true|false)"/g, '<span style="color:#77D72F;">$1</span>');
  132. text = text.replace(/"([^"]*)"/g, '<span style="color: #77D72F;">"$1"</span>');
  133. text = text.replace(/\b(\d+(?:\.\d+)?)\b/g, '<span style="color: #f39c12;">$1</span>');
  134. valueElement.innerHTML = text;
  135. }
  136. document.body.appendChild(container);
  137. })();