edge好用的记笔记扩展代码
时间: 2023-08-06 14:10:33 浏览: 44
以下是一个基于 Edge 浏览器的记笔记扩展代码的示例:
```javascript
// 获取笔记列表
function getNotes() {
return JSON.parse(localStorage.getItem('notes') || '[]');
}
// 保存笔记
function saveNote() {
const notes = getNotes();
const title = document.getElementById('title').value;
const content = document.getElementById('content').value;
const note = { title, content };
notes.push(note);
localStorage.setItem('notes', JSON.stringify(notes));
alert('笔记已保存!');
}
// 显示笔记列表
function showNotes() {
const notes = getNotes();
const notesList = document.getElementById('notes-list');
notesList.innerHTML = '';
notes.forEach((note, index) => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = `#note-${index}`;
a.innerText = note.title;
li.appendChild(a);
notesList.appendChild(li);
const div = document.createElement('div');
div.id = `note-${index}`;
div.innerHTML = `<h2>${note.title}</h2><p>${note.content}</p>`;
notesList.appendChild(div);
});
}
// 初始化
function init() {
const saveButton = document.getElementById('save-button');
const showButton = document.getElementById('show-button');
saveButton.addEventListener('click', saveNote);
showButton.addEventListener('click', showNotes);
}
init();
```
这段代码实现了以下功能:
1. 获取笔记列表:从本地存储中获取之前保存的所有笔记。
2. 保存笔记:将用户输入的标题和内容保存到本地存储中。
3. 显示笔记列表:动态生成一个笔记列表,用户可以点击每个笔记的标题查看笔记的详细内容。
4. 初始化:绑定保存笔记和显示笔记列表的按钮的事件处理函数。
你可以将这段代码保存为一个 JavaScript 文件,然后在 Edge 浏览器的扩展中加载它,即可使用它的记笔记功能。