Chrome扩展State管理
[英]Chrome extension State management
问题描述
我目前正在制作一个 chrome 扩展（这是我的第一个 chrome 扩展），您可以用它做小笔记并希望保留用户输入。 我将用户输入保留在输入类中。 我如何能够存储 chrome 扩展 state 以便当我重新打开它时，它会保持不变？ 这是我到目前为止编写的代码。
//selectors const addbutton = document.querySelector(".add"); const addlist = document.querySelector(".note-list"); const noteList = document.querySelector(".note-list") //event listners addbutton.addEventListener('click', addNote); //functions function addNote(event){ //prevent page refresh event.preventDefault(); //note div const noteDiv = document.createElement('div'); noteDiv.classList.add('note'); //create li const newNote = document.createElement('li'); newNote.classList.add('noteitem'); noteDiv.appendChild(newNote); //create input const newInput = document.createElement('input'); newInput.classList.add('noteInput') newNote.appendChild(newInput); //append to list noteList.appendChild(noteDiv); }
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; outline: none; } body{ height: 500px; width: 400px; } h1{ font-family: "Montserrat", sans-serif; font-size: 20px; font-weight: lighter; padding-top: 10px; padding-bottom: 10px; } main{ text-align: center; }.title{ box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.685); }.mainpage{ padding-top: 20px; }.add{ font-family: "Montserrat", sans-serif; font-size: 25px; font-weight: 400px; background-color: #00FF33; width:40px; height: 40px; border-radius: 10px; border: none; transition: ease 0.5s; }.add:hover{ background-color: #00c026; }.note-container{ display: flex; justify-content: center; align-items: center; }.note-list{ min-width: 30%; list-style: none; }.note{ margin: 0.5rem; background: whitesmoke; font-size: 1.5rem; display: flex; justify-content: space-between; border-radius: 7px; }.noteitem{ padding: 0.5rem 2rem; }.noteInput{ display: block; margin-right: auto; margin-left: auto; border: none; background-color: whitesmoke; font-size: 20px; max-height: 200px; }.note li{ flex: 1; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Mini Note</title> <link rel="stylesheet" href="styles.css"> </head> <body> <main> <div class="title"> <h1>Mini note app</h1> </div> <section class="mainpage"> <button class="add">+</button> <div class="note-container"> <ul class="note-list"></ul> </div> </section> </main> <script src="/popup.js"></script> </body> </html>
谢谢
2 个解决方案
解决方案1
0 2020-07-14 08:34:38
解决方案2
0 已采纳 2020-07-17 00:52:12
// uses local storage
chrome.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
// uses synced storage, hits Chrome backend when being set
chrome.storage.sync.set({key: value}, function() {
console.log('Value is set to ' + value);
});
// to retrieve the data, use 'sync' instead of 'local' if using sync
chrome.storage.local.get(['key'], function(result) {
console.log('Value currently is ' + result.key);
});
您仍然需要弄清楚如何组织笔记数据。 例如，您可以将所有笔记存储在notes键上的数组中，如下所示：
{
notes: [
{ id: 1, body: 'First note' },
{ id: 2, body: 'Second note' }
]
}
记住状态镀铬扩展
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.