sessionStorage是HTML5中提供的一种客户端存储数据的方法，数据只能在同一个浏览器窗口中共享。在
备忘录页面中
使用sessionStorage可以方便地存储用户输入的
备忘内容，从而实现数据的持久化。以下是一个简单的
备忘录页面的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
备忘录</title>
<style>
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 300px;
padding: 10px;
}
</style>
</head>
<body>
<h1>
备忘录</h1>
<label>
标题：<br>
<input type="text" id="title">
</label>
<label>
内容：<br>
<textarea id="content"></textarea>
</label>
<button onclick="save()">保存</button>
<button onclick="clearAll()">清空</button>
<ul id="memoList"></ul>
<script>
// 加载已保存的
备忘录
for (var i = 0; i < sessionStorage.length; i++) {
var key = sessionStorage.key(i);
if (key.indexOf("memo_") === 0) {
var memo = JSON.parse(sessionStorage.getItem(key));
addMemoToList(memo);
}
}
// 保存
备忘录
function save() {
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
if (title.trim() === "") {
alert("请输入标题");
return;
}
if (content.trim() === "") {
alert("请输入内容");
return;
}
var id = "memo_" + new Date().getTime(); //
使用时间戳作为ID
var memo = {id: id, title: title, content: content};
sessionStorage.setItem(id, JSON.stringify(memo));
addMemoToList(memo);
document.getElementById("title").value = "";
document.getElementById("content").value = "";
}
// 清空所有
备忘录
function clearAll() {
sessionStorage.clear();
document.getElementById("memoList").innerHTML = "";
}
// 将
备忘录添加到列表中
function addMemoToList(memo) {
var li = document.createElement("li");
var a = document.createElement("a");
a.href = "#";
a.innerHTML = memo.title;
a.onclick = function() {
showMemo(memo);
return false;
};
li.appendChild(a);
document.getElementById("memoList").appendChild(li);
}
// 显示
备忘录详细内容
function showMemo(memo) {
document.getElementById("title").value = memo.title;
document.getElementById("content").value = memo.content;
}
</script>
</body>
</html>
```
以上代码实现了一个简单的
备忘录页面，用户输入标题和内容后，点击保存按钮可以将
备忘录保存到sessionStorage中。同时，已保存的
备忘录会显示在列表中，点击列表中的
备忘录标题可以查看详细内容。清空按钮可以清空所有
备忘录。
4536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
