js写备忘录怎么写

使用JavaScript编写备忘录的方法包括以下几个核心步骤：定义基本结构、使用LocalStorage保存数据、添加和删除备忘录项目、实现用户界面交互。其中，使用LocalStorage保存数据是关键，因为它可以让用户在刷新页面后仍然保留备忘录内容。以下将详细介绍如何实现这一步。

一、定义基本结构

在编写JavaScript代码之前，需要先定义HTML和CSS结构。HTML将提供基本的页面布局，而CSS将负责样式和视觉效果。

1. HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript备忘录</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>备忘录</h1>
        <input type="text" id="memoInput" placeholder="输入备忘录内容">
        <button id="addMemoButton">添加</button>
        <ul id="memoList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

body {
    font-family: Arial, sans-serif;
}
.container {
    width: 300px;
    margin: 0 auto;
    text-align: center;
}
input, button {
    padding: 10px;
    margin: 5px;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    background: #f4f4f4;
    padding: 10px;
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
button.delete {
    background: red;
    color: white;
    border: none;
    cursor: pointer;
}

二、使用LocalStorage保存数据

为了在页面刷新后仍然保留备忘录内容，可以使用LocalStorage来保存数据。LocalStorage是一种Web存储方式，允许在浏览器中存储数据。

1. 初始化LocalStorage

在页面加载时，需要从LocalStorage中读取数据并显示在页面上。

document.addEventListener('DOMContentLoaded', loadMemos);
function loadMemos() {
    let memos = JSON.parse(localStorage.getItem('memos')) || [];
    memos.forEach(function(memo) {
        addMemoToList(memo);
    });
}

2. 添加备忘录

当用户输入备忘录内容并点击添加按钮时，需要将内容保存到LocalStorage，并在页面上显示。

document.getElementById('addMemoButton').addEventListener('click', addMemo);
function addMemo() {
    let memoInput = document.getElementById('memoInput').value;
    if (memoInput === '') {
        alert('请输入内容');
        return;
    }
    let memos = JSON.parse(localStorage.getItem('memos')) || [];
    memos.push(memoInput);
    localStorage.setItem('memos', JSON.stringify(memos));
    addMemoToList(memoInput);
    document.getElementById('memoInput').value = '';
}
function addMemoToList(memo) {
    let li = document.createElement('li');
    li.textContent = memo;
    let deleteButton = document.createElement('button');
    deleteButton.textContent = '删除';
    deleteButton.className = 'delete';
    deleteButton.onclick = deleteMemo;
    li.appendChild(deleteButton);
    document.getElementById('memoList').appendChild(li);
}

三、添加和删除备忘录项目

用户不仅需要添加备忘录，还需要能够删除备忘录。删除备忘录时，需要同时更新LocalStorage和页面显示。

1. 删除备忘录

function deleteMemo() {
    let memo = this.parentElement.textContent.replace('删除', '');
    let memos = JSON.parse(localStorage.getItem('memos')) || [];
    memos = memos.filter(function(item) {
        return item !== memo;
    });
    localStorage.setItem('memos', JSON.stringify(memos));
    this.parentElement.remove();
}

四、实现用户界面交互

为了提高用户体验，可以添加一些额外的功能和样式，如输入框的焦点状态、按钮的悬停效果等。

1. 输入框焦点状态

input:focus {
    border-color: #000;
    outline: none;
}

2. 按钮悬停效果

button:hover {
    opacity: 0.8;
}

五、总结

通过以上步骤，您可以使用JavaScript编写一个简单的备忘录应用程序。定义基本结构、使用LocalStorage保存数据、添加和删除备忘录项目、实现用户界面交互是实现这一目标的关键步骤。以下是完整的JavaScript代码：

document.addEventListener('DOMContentLoaded', loadMemos);
function loadMemos() {
    let memos = JSON.parse(localStorage.getItem('memos')) || [];
    memos.forEach(function(memo) {
        addMemoToList(memo);
    });
}
document.getElementById('addMemoButton').addEventListener('click', addMemo);
function addMemo() {
    let memoInput = document.getElementById('memoInput').value;
    if (memoInput === '') {
        alert('请输入内容');
        return;
    }
    let memos = JSON.parse(localStorage.getItem('memos')) || [];
    memos.push(memoInput);
    localStorage.setItem('memos', JSON.stringify(memos));
    addMemoToList(memoInput);
    document.getElementById('memoInput').value = '';
}
function addMemoToList(memo) {
    let li = document.createElement('li');
    li.textContent = memo;
    let deleteButton = document.createElement('button');
    deleteButton.textContent = '删除';
    deleteButton.className = 'delete';
    deleteButton.onclick = deleteMemo;
    li.appendChild(deleteButton);
    document.getElementById('memoList').appendChild(li);
}
function deleteMemo() {
    let memo = this.parentElement.textContent.replace('删除', '');
    let memos = JSON.parse(localStorage.getItem('memos')) || [];
    memos = memos.filter(function(item) {
        return item !== memo;
    });
    localStorage.setItem('memos', JSON.stringify(memos));
    this.parentElement.remove();
}

通过上述代码，您将能够创建一个功能齐全的JavaScript备忘录应用程序，能够在页面刷新后仍然保留用户的备忘录内容。使用LocalStorage保存数据是确保数据持久性的关键步骤。