Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment