Skip to content

Instantly share code, notes, and snippets.

@nunull
Created February 4, 2014 16:24
Show Gist options
  • Save nunull/8807030 to your computer and use it in GitHub Desktop.
Save nunull/8807030 to your computer and use it in GitHub Desktop.
LocalStorageEditor
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<style type="text/css">
body {
background-color: #EEE;
}
header {
z-index: 1000;
position: fixed;
width: 800px;
margin: 0 0 0 50%;
top: 50px;
left: -400px;
text-align: right;
}
header a {
display: inline-block;
cursor: pointer;
padding: 18px;
background: #39E3C7;
font-family: Arial, sans-serif;
font-size: 9pt;
color: #222;
}
#date {
position: fixed;
width: 720px;
margin: 0 0 0 50%;
top: 50px;
bottom: 50px;
left: -400px;
padding: 20px 40px;
background: #3AF2D4;
font-family: Arial, sans-serif;
font-size: 9pt;
color: #222;
}
#editor {
position: fixed;
overflow-y: scroll;
width: 720px;
margin: 0 0 0 50%;
top: 100px;
bottom: 50px;
left: -400px;
padding: 40px;
outline: none;
background: #FFF;
}
#editor, #editor * {
font-family: monaco, monospace;
font-size: 10pt;
color: #222;
}
</style>
</head>
<body>
<header>
<a id="action-save">Download</a>
</header>
<div id="date"></div>
<div id="editor" contenteditable="true"></div>
<script type="text/javascript">
var data = get();
if(!data.edited && ! data.data) data = {edited: (new Date()).getTime(), data: ''};
function save() {
data.edited = (new Date()).getTime();
localStorage.setItem('data', JSON.stringify(data));
render();
}
function get() {
return JSON.parse(localStorage.getItem('data'));
}
function render() {
var d = new Date(data.edited);
document.getElementById("date").innerHTML = 'Last saved: <b>'
+ d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + ' '
+ d.getHours() + ':'
+ (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes())
+ '</b>';
}
function saveToFile() {
window.location = 'data:application/octet-stream,' +
escape(data.data
.replace(/<div>/g, '\n')
.replace(/<\/div>/g, '')
.replace(/<br>/g, ''));
}
document.getElementById("editor").addEventListener('keyup', function(e) {
data.data = document.getElementById("editor").innerHTML;
save();
});
document.getElementById("editor").innerHTML = data.data;
document.getElementById("editor").focus();
document.getElementById("action-save").addEventListener('click', function(e) {
saveToFile();
});
render();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment