nwtgck/data_url_editor.html

## data_url_editor.html
<html>
  <head>
    <title>Data URI Editor with LocalStorage</title>
    <style>
      @media (prefers-color-scheme: dark) {
        body, input, textarea {
          background: #333;
          color: white;
        }
         ::placeholder {
          color: #ccc;
        }
      }
      textarea {
        width: 100%;
        height: 10em;
      }

      iframe {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <textarea id='editor' placeholder="Input HTML"></textarea>
    <button id="clear_storage">clear storage</button>
    <textarea id='data_uri'></textarea>
    <iframe id="preview"></iframe>
    <script>
      var storageKey = "html";
      if (localStorage.getItem(storageKey) !== null) {
        editor.value = localStorage.getItem(storageKey);
      }
      function update(){
        preview.src = data_uri.value = "data:text/html," + encodeURIComponent(editor.value).replace(/'/g, '%27');
        localStorage.setItem(storageKey, editor.value);
      }
      editor.oninput = update;
      update();
      clear_storage.onclick = function () {
        localStorage.removeItem(storageKey);
      };
    </script>
  </body>
</html>
	<html>
	<head>
	<title>Data URI Editor with LocalStorage</title>
	<style>
	@media (prefers-color-scheme: dark) {
	body, input, textarea {
	background: #333;
	color: white;
	}
	::placeholder {
	color: #ccc;
	}
	}
	textarea {
	width: 100%;
	height: 10em;
	}

	iframe {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<textarea id='editor' placeholder="Input HTML"></textarea>
	<button id="clear_storage">clear storage</button>
	<textarea id='data_uri'></textarea>
	<iframe id="preview"></iframe>
	<script>
	var storageKey = "html";
	if (localStorage.getItem(storageKey) !== null) {
	editor.value = localStorage.getItem(storageKey);
	}
	function update(){
	preview.src = data_uri.value = "data:text/html," + encodeURIComponent(editor.value).replace(/'/g, '%27');
	localStorage.setItem(storageKey, editor.value);
	}
	editor.oninput = update;
	update();
	clear_storage.onclick = function () {
	localStorage.removeItem(storageKey);
	};
	</script>
	</body>
	</html>