有没有什么办法来保存生成的EJS文件中的Jquery所做的HTML元素类更改？

我有一个待办事项列表节点项目，其中每个待办事项列表都保存为MongoDB中的实体，如下所示：

var todoSchema = new mongoose.Schema({ items: [String] }); 

当用户点击待办事项列表中的其中一个项目时，通过改变被点击的元素的CSS类别将其交叉出来。 当用户刷新时，这个类被改回到EJS文件如何呈现它。

我想把十字架放在本地，也就是说，只有划掉一个物品的人才会看到它被划掉。 有没有办法做到这一点，不涉及为每个用户分开数据库条目？

ex entry：

 { "_id": { "$oid": "59bf2fed71c3840508539b29" }, "item": [ "ayy", "yyaa", "yyaaaafyyy" ], "__v": 0 } 

Answer 1

好的，这是一个function性的解决scheme：

后端

 app.get('/testing', (req, res, next) => { const todoItems = { '_id': { '$oid': '59bf2fed71c3840508539b29' }, 'items': [ { id: 0, todo: 'ayy' }, { id: 1, todo: 'yyaa' }, { id: 2, todo: 'yyaaaafyyy' } ], '__v': 0 } res.render('testing', { todoItems }) }) 

前端

 <style> .complete { text-decoration: line-through; } </style> 

把你的项目放入一个列表中。 事件侦听器将被添加到ID为#todo的元素内的每个<li>元素

 <ul id="todo"> <% todoItems.items.forEach((item) => { %> <li id="<%- item.id %>"> <%= item.todo %> </li> <% }) %> </ul> 

这是一些JavaScript放置在</body>之上

 <script> // Define a function that takes input of an HTML element // and then toggles the CSS class // then checks localStorage to see if the item is in it // if not, add it // if so, remove it const toggleComplete = (item) => { item.classList.toggle('complete') const isComplete = localStorage.getItem(item.innerText) if (!isComplete) { localStorage.setItem(item.innerText, 'complete') return } localStorage.removeItem(item.innerText) } // When the page loads, add an event listener to each <li> const items = document.querySelectorAll('#todo li') items.forEach((item) => item.addEventListener('click', () => toggleComplete(item))) // If the user leaves and comes back, we reinitialize // We step through the same array we add event listeners to // if the todo item is in localStorage, add the CSS class const reinitializeSession = () => { items.forEach((item) => { const isComplete = localStorage.getItem(item.innerText) if (!isComplete) return item.classList.add('complete') }) } reinitializeSession() </script>