Anotar | Salvar | Recuperar | ...
DevRaphinhaAnx, usando a ideia que apresentou. A primeira ideia precisa de uma hospedagem estática, fazendo do navegador um bloco de notas temporário (até limparem o local storage ou um crash do navegador). A duas últimas ideias funcionam no Console do navegador.
Salvar anotações no storage (desde que não seja janela anônima);
<!-- [:) start:notes.htm (:] -->
<!-- Este código pode precisar de uma hospedagem local ou na nuvem. -->
<!-- É evidente que o conteúdo do storage sempre será local -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editor de Texto</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
}
button {
margin: 5px;
padding: 10px;
}
.message {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Editor de Texto</h1>
<textarea id="textInput" placeholder="Escreva algo aqui..."></textarea><br>
<input type="text" id="fileName" placeholder="Caminho e nome do arquivo (opcional)"><br>
<button id="saveToFile">Salvar Como Arquivo</button>
<button id="store">Armazenar no Storage</button>
<button id="showIds">Mostrar IDs Armazenados</button>
<button id="clear">Limpar Textarea</button>
<div class="message" id="message"></div>
<h2>IDs armazenados:</h2>
<ul id="idsList"></ul>
<script>
// Função para salvar conteúdo em um arquivo
document.getElementById('saveToFile').addEventListener('click', function () {
const text = document.getElementById('textInput').value;
const fileName = document.getElementById('fileName').value || `texto_${Date.now()}.txt`;
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showMessage(`Arquivo ${fileName} salvo com sucesso!`);
});
// Função para armazenar o texto no localStorage
document.getElementById('store').addEventListener('click', function () {
const text = document.getElementById('textInput').value;
const id = Date.now().toString();
localStorage.setItem(id, text);
showMessage(`Texto armazenado com o ID: ${id}`);
});
// Função para mostrar os IDs armazenados
document.getElementById('showIds').addEventListener('click', function () {
const idsList = document.getElementById('idsList');
idsList.innerHTML = '';
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const li = document.createElement('li');
li.textContent = key;
idsList.appendChild(li);
}
if (localStorage.length === 0) {
showMessage('Nenhum ID armazenado.');
}
});
// Função para limpar o textarea
document.getElementById('clear').addEventListener('click', function () {
document.getElementById('textInput').value = '';
showMessage('Textarea limpo.');
});
// Função para mostrar mensagens
function showMessage(message) {
const messageDiv = document.getElementById('message');
messageDiv.textContent = message;
setTimeout(() => {
messageDiv.textContent = '';
}, 3000);
}
</script>
</body>
</html>
<!-- [:) end:notes.htm (:] -->
Salvar todos os pares id:valor em um JSON;
// Se entende e confia no que esse código faz copie e cole no console do navegador
// Exportar localStorage para JSON
function exportLocalStorage() {
const localStorageData = {};
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
localStorageData[key] = value;
}
const jsonStr = JSON.stringify(localStorageData, null, 2);
// Exibir o JSON no console
console.log(jsonStr);
// Perguntar se o usuário quer salvar o arquivo
const shouldSave = confirm("Deseja salvar o localStorage como arquivo JSON?");
if (shouldSave) {
const timestamp = Date.now();
const blob = new Blob([jsonStr], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `localStorage_${timestamp}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
exportLocalStorage();
Recuperar de volta todos os pares id:valor de um JSON em arquivo para o local storage.
// Se entende e confia no que esse código faz copie e cole no console do navegador
// Importar JSON para o Local Storage
function importLocalStorage() {
const fromFile = confirm("Deseja importar de um arquivo JSON?");
if (fromFile) {
const input = document.createElement("input");
input.type = "file";
input.accept = ".json";
input.onchange = e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const jsonData = event.target.result;
populateLocalStorage(jsonData);
};
reader.readAsText(file);
};
input.click();
} else {
const jsonStr = prompt("Cole o conteúdo JSON aqui:");
if (jsonStr) {
populateLocalStorage(jsonStr);
}
}
}
function populateLocalStorage(jsonStr) {
try {
const data = JSON.parse(jsonStr);
for (let key in data) {
if (data.hasOwnProperty(key)) {
localStorage.setItem(key, data[key]);
}
}
console.log("localStorage populado com sucesso!");
} catch (e) {
console.error("Falha ao importar JSON:", e);
}
}
importLocalStorage();
Agora só falta transformar estes dois últimos itens em um complemento para o navegador.