-
Notifications
You must be signed in to change notification settings - Fork 1
/
backup.html
119 lines (99 loc) · 3.91 KB
/
backup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Backup & Restore Data</title>
<style>
details {
cursor: pointer;
}
</style>
</head>
<body>
<h1 class="title-primary">Backup & Restore Data (Unstable)</h1>
<p class="title-description">
This page allows you to backup and restore data from localStorage. This backup
contains the codes of the countries you have saved, your country listing and theme
preference. The backup feature may be changed or deleted in the future, so use it
only when necessary.
</p>
<p>
(ex: when we upgraded parcel npm package from 2.8 to 2.9, the backup function
stopped working properly, so we made some changes to the backup feature behind the
scenes.)
</p>
<details>
<summary class="title-secondary">How to Backup Data</summary>
<p class="title-description">
Click the "Download Backup" link below to download a JSON file containing your
data. You can use this file to restore your data later from restore data section.
</p>
</details>
<hr />
<script>
// Create a divider
const divider1 = document.createElement('hr');
// Get the data from localStorage
const dataToBackup = JSON.stringify(localStorage);
// Create a Blob with the JSON data
const blob = new Blob([dataToBackup], { type: 'application/json' });
// Create a download link
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = `countrypedia-backup_${Date.now()}.json`;
downloadLink.textContent = 'Download Backup';
// Append the link to the document
document.body.appendChild(downloadLink);
// Append a divider to the document
document.body.appendChild(divider1);
const fileInputLabel = document.createElement('label');
fileInputLabel.textContent = 'Restore Data: ';
document.body.appendChild(fileInputLabel);
const uploadInput = document.createElement('input');
uploadInput.type = 'file';
document.body.appendChild(uploadInput);
uploadInput.addEventListener('change', async event => {
const file = event.target.files[0];
if (file) {
try {
const content = await file.text();
const jsonData = JSON.parse(content);
// Clear existing data in localStorage
localStorage.clear();
// Restore data from the JSON object
for (const key in jsonData) {
localStorage.setItem(key, jsonData[key]);
}
alert('Data restored successfully!');
} catch (error) {
alert('Error restoring data. Please make sure the file is valid JSON.');
}
}
});
// Create a divider
const divider2 = document.createElement('hr');
// Append a divider to the document
document.body.appendChild(divider2);
// Create a button to clear localStorage
const clearButton = document.createElement('button');
clearButton.textContent = 'Clear Data';
document.body.appendChild(clearButton);
clearButton.addEventListener('click', () => {
if (window.confirm('Do you really want to delete all items of this website?')) {
localStorage.clear();
alert('All data in localStorage has been cleared.');
}
});
// Create a divider
const divider3 = document.createElement('hr');
// Append a divider to the document
document.body.appendChild(divider3);
// Add link to return home page
const homeLink = document.createElement('a');
homeLink.href = '/';
homeLink.textContent = 'Return to Home Page';
document.body.appendChild(homeLink);
</script>
</body>
</html>