Archiver in HTML5 and jQuery with Upload and Search functionality based on W3C WebStorage - nikita-noark

28 Feb 2025


      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>