HTML5 提供了两种主要的离线存储机制：本地存储（LocalStorage）和IndexedDB。以下是这两种方法的简要介绍和使用示例：
LocalStorage 是一种简单的键值对存储方式，适合存储少量数据。它的数据在浏览器关闭后仍然保留。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocalStorage Example</title>
</head>
<body>
<h1>LocalStorage Example</h1>
<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="saveData()">Save</button>
<button onclick="loadData()">Load</button>
<script>
function saveData() {
const name = document.getElementById('nameInput').value;
localStorage.setItem('userName', name);
alert('Data saved!');
}
function loadData() {
const name = localStorage.getItem('userName');
if (name) {
alert('Name: ' + name);
} else {
alert('No data found!');
}
}
</script>
</body>
</html>
IndexedDB 是一种更复杂的客户端存储解决方案，适合存储大量结构化数据。它提供了事务支持，并且可以存储二进制数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IndexedDB Example</title>
</head>
<body>
<h1>IndexedDB Example</h1>
<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="saveData()">Save</button>
<button onclick="loadData()">Load</button>
<script>
let db;
function initDB() {
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
objectStore.createIndex('name', 'name', { unique: false });
};
request.onsuccess = function(event) {
db = event.target.result;
};
request.onerror = function(event) {
console.error('Database error: ' + event.target.errorCode);
};
}
function saveData() {
const name = document.getElementById('nameInput').value;
const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
const request = objectStore.add({ name: name });
request.onsuccess = function(event) {
alert('Data saved!');
};
request.onerror = function(event) {
console.error('Error saving data: ' + event.target.errorCode);
};
}
function loadData() {
const transaction = db.transaction(['users'], 'readonly');
const objectStore = transaction.objectStore('users');
const request = objectStore.getAll();
request.onsuccess = function(event) {
const users = event.target.result;
if (users.length > 0) {
alert('Name: ' + users[0].name);
} else {
alert('No data found!');
}
};
request.onerror = function(event) {
console.error('Error loading data: ' + event.target.errorCode);
};
}
initDB();
</script>
</body>
</html>
选择哪种方法取决于你的具体需求。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
