使用sessionStorage存储写一个备忘录页面
时间: 2024-05-24 19:08:20 浏览: 114
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中。同时,已保存的备忘录会显示在列表中,点击列表中的备忘录标题可以查看详细内容。清空按钮可以清空所有备忘录。
阅读全文