html5制作一个简单的本地存储页面
时间: 2023-08-06 15:07:12 浏览: 38
当然可以!以下是一个简单的示例,展示如何使用HTML5的本地存储功能(localStorage)来创建一个保存和读取数据的页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>本地存储页面</title>
<script>
function saveData() {
// 获取输入框的值
var data = document.getElementById('dataInput').value;
// 将值保存到本地存储
localStorage.setItem('savedData', data);
// 提示保存成功
alert('数据已保存!');
}
function loadData() {
// 从本地存储中获取已保存的值
var savedData = localStorage.getItem('savedData');
// 将值显示在页面上
if (savedData) {
document.getElementById('dataDisplay').innerHTML = savedData;
} else {
document.getElementById('dataDisplay').innerHTML = '没有保存的数据';
}
}
</script>
</head>
<body>
<h1>本地存储页面</h1>
<label for="dataInput">输入数据:</label>
<input type="text" id="dataInput">
<button onclick="saveData()">保存</button>
<h2>已保存的数据:</h2>
<div id="dataDisplay"></div>
<script>
// 页面加载时自动加载已保存的数据
window.onload = loadData;
</script>
</body>
</html>
```
在这个示例中,我们使用了localStorage对象来保存和读取数据。当用户在文本框中输入数据并点击保存按钮时,数据将保存到localStorage中。每次页面加载时,我们都会自动加载已保存的数据并显示在页面上。
希望这个示例对你有所帮助!如有任何疑问,请随时提问。