Jeg har bygget arkivverktøyet Archiver i HTML5 med jQuery, WebStorage (localStorage) og CSS3.
Nå kan du laste opp tekstfiler og søke gjennom dem direkte i nettleseren.
Implementasjon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Archive Tool</title> <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { max-width: 600px; margin: auto; } input, button { margin: 5px 0; padding: 10px; width: 100%; } #results { margin-top: 20px; } .document { padding: 10px; background: #f1f1f1; margin-top: 5px; } </style> </head> <body> <div class="container"> <h1>Archive Tool</h1> <input type="file" id="fileInput"> <button onclick="uploadFile()">Upload</button> <input type="text" id="searchQuery" placeholder="Enter search query"> <button onclick="searchDocuments()">Search</button> <div id="results"></div> </div>
<script> function uploadFile() { let file = document.getElementById("fileInput").files[0]; if (!file) return alert("Please select a file.");
let reader = new FileReader(); reader.onload = function(event) { let content = event.target.result; localStorage.setItem(file.name, content); alert("File uploaded successfully!"); }; reader.readAsText(file); }
function searchDocuments() { let query = $("#searchQuery").val().toLowerCase(); let resultsDiv = $("#results"); resultsDiv.empty();
Object.keys(localStorage).forEach(filename => { let content = localStorage.getItem(filename); if (content.toLowerCase().includes(query)) { resultsDiv.append(`<div class='document'><strong>${filename}</strong><p>${content}</p></div>`); } }); } </script> </body> </html>