使用sessionStorage和json存储写一个备忘录页面
时间: 2024-05-24 10:08:20 浏览: 106
好的,使用sessionStorage和json存储可以实现一个简单的备忘录页面。具体实现步骤如下:
1.创建一个HTML页面,包括输入框和按钮,用于添加备忘录条目。
2.在JavaScript中定义一个数组,用于存储备忘录条目。
3.为按钮添加点击事件,当用户点击按钮时,将输入框中的文本添加到数组中。
4.使用JSON.stringify()方法将数组转换为JSON格式的字符串。
5.将JSON字符串存储在sessionStorage中,可以使用sessionStorage.setItem()方法。
6.当页面重新加载时,从sessionStorage中读取保存的JSON字符串,并将其转换为数组。
7.使用循环遍历数组,并将每个备忘录条目显示在页面上。
8.如果用户想要删除一个备忘录条目,可以从数组中删除该条目,然后再次将数组保存到sessionStorage中。
下面是实现代码示例:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>备忘录</title>
</head>
<body>
<input type="text" id="memoInput">
<button onclick="addMemo()">添加备忘录</button>
<ul id="memoList"></ul>
</body>
</html>
```
JavaScript部分:
```
//定义一个数组,用于存储备忘录条目
var memoArray = [];
//添加备忘录条目
function addMemo() {
//获取输入框中的文本
var memoText = document.getElementById("memoInput").value;
//将备忘录条目添加到数组中
memoArray.push(memoText);
//将数组转换为JSON格式的字符串
var memoJson = JSON.stringify(memoArray);
//将JSON字符串保存到sessionStorage中
sessionStorage.setItem("memoList", memoJson);
//更新备忘录列表
updateMemoList();
}
//更新备忘录列表
function updateMemoList() {
//从sessionStorage中获取JSON字符串
var memoJson = sessionStorage.getItem("memoList");
//如果JSON字符串存在,则将其转换为数组,并显示在页面上
if (memoJson !== null) {
memoArray = JSON.parse(memoJson);
var memoList = document.getElementById("memoList");
memoList.innerHTML = "";
for (var i = 0; i < memoArray.length; i++) {
var memoItem = document.createElement("li");
memoItem.innerHTML = memoArray[i] + "<button onclick='deleteMemo(" + i + ")'>删除</button>";
memoList.appendChild(memoItem);
}
}
}
//删除备忘录条目
function deleteMemo(index) {
memoArray.splice(index, 1);
var memoJson = JSON.stringify(memoArray);
sessionStorage.setItem("memoList", memoJson);
updateMemoList();
}
//页面加载完成后更新备忘录列表
window.onload = updateMemoList;
```
阅读全文