html5制作一个简单的本地存储页面
时间: 2023-08-06 21:07:12 浏览: 46
当然可以!以下是一个简单的HTML5页面示例,使用本地存储功能(localStorage)来保存和获取用户输入的文本:
```html
<!DOCTYPE html>
<html>
<head>
<title>本地存储页面</title>
</head>
<body>
<h1>本地存储页面</h1>
<label for="note">请输入笔记:</label>
<input type="text" id="note" name="note">
<button onclick="saveNote()">保存</button>
<h2>已保存的笔记:</h2>
<p id="displayNote"></p>
<script>
// 保存笔记到本地存储
function saveNote() {
var note = document.getElementById("note").value;
localStorage.setItem("userNote", note);
document.getElementById("displayNote").innerText = note;
}
// 页面加载时获取已保存的笔记
window.onload = function() {
var savedNote = localStorage.getItem("userNote");
if (savedNote) {
document.getElementById("displayNote").innerText = savedNote;
}
};
</script>
</body>
</html>
```
上述代码创建了一个简单的页面,其中包含一个输入框和一个保存按钮。用户可以在输入框中输入笔记,并通过点击保存按钮将笔记保存到本地存储中。已保存的笔记将在页面上显示出来。
请注意,这只是一个简单的示例,仅用于演示如何使用HTML5本地存储功能。在实际应用中,您可能需要添加更多的逻辑和错误处理。