个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我目前正在编写一个简单的 vanilla JavaScript 待办事项应用程序。一切看起来都很好，但是当涉及到将数据保存在新的 localStorage 中时，我做不到，我从未使用过 localStorage，我'我已经阅读了很多文章，当我尝试简单的东西时它可以工作，但我无法使我的应用程序正常工作。我想将输入的数据保存在 REFRESH 上，它不会消失，就像现在这样...这是应用程序的链接
**** 我想用 VANILLA JAVASCRIPT，而不是 JQUERY ****
所以基本上，如果用户做了几个待办事项，并且在刷新时，我希望所有内容都保留下来，就像下面的图片。
HTML:
<body>
<div class="holder">
<div>
<input type="text" />
</div>
<button id="add">Add</button>
<div class="results"></div>
</div>
</body>
JS:
document.addEventListener('DOMContentLoaded',function(){
let holder = document.querySelector('.holder'),
addBtn = document.querySelector('#add'),
removeBtn = document.querySelector('#remove'),
resultBox = document.querySelector('.results');
let input = document.getElementsByTagName('input')[0];
function setAttributes(element,attrs){
for(let i in attrs){
element.setAttribute(i,attrs[i]);
}
}
setAttributes(input,{
'placeholder' : 'Enter To-Do',
'name' : 'todo'
});
function addtoBtn(){
addBtn.addEventListener('click',function(event){
if(input.value !== ''){
let openingDiv = '<div class="todo"><span>';
let closingDiv = '</span><button class="edit">Edit</button><button class="save">Save</button><button class="removeBtn">Remove</button></div>';
resultBox.innerHTML += openingDiv + input.value + closingDiv;
input.value = '';
event.preventDefault();
} else{
alert('Enter To-do!');
}
let innerBtn = document.querySelectorAll('.removeBtn');
let editBtn = document.querySelectorAll('.edit');
let saveBtn = document.querySelectorAll('.save');
for(let collection = 0 ; collection < saveBtn.length ; collection++){
saveBtn[collection].style.display = "none";
}
function removeToDo(){
this.parentNode.style.display = 'none';
}
for(let k = 0 ; k < innerBtn.length ; k++){
innerBtn[k].addEventListener('click',removeToDo);
}
function startContentEdit(){
this.previousSibling.contentEditable = true;
this.previousSibling.style.padding = "10px";
this.previousSibling.style.boxShadow = "0 0 15px #fff";
this.previousSibling.style.borderRadius = "10px";
this.previousSibling.style.transition = "all .4s";
this.style.display = "none";
for(let el = 0 ; el < saveBtn.length ; el++){
this.nextSibling.style.display = 'inline-block';
}
}
for(let j = 0 ; j < editBtn.length ; j++){
editBtn[j].addEventListener('click',startContentEdit);
}
function saveContentEdit(){
this.style.display = 'none';
for(let j = 0 ; j < editBtn.length ; j++){
this.previousSibling.style.display = "inline-block";
this.parentNode.firstElementChild.style.display = "block";
this.parentNode.firstElementChild.contentEditable = false;
this.parentNode.firstElementChild.style.padding = "0px";
this.parentNode.firstElementChild.style.boxShadow = "0 0 0";
}
}
for(let x = 0 ; x < saveBtn.length ; x++){
saveBtn[x].addEventListener('click',saveContentEdit);
}
});
}
addtoBtn();
});
正如我所说，我看了很多文章，但找不到解决方案的任何答案。抱歉，这是我的第一个 javascript 应用程序，几乎所有的东西都在里面工作 :D 我有点兴奋，所以我想让它完全工作。
简历:
是否可以使用 localStorage 或 sessionStorage 来保存新生成的
<div class="todo></div>容器？
最佳答案
使用本地存储其实很简单:给自己一个引用:
store = window.localStorage;
然后您可以像使用任何其他键值对容器一样在其中存储内容:
store[<key>] = <value>; //or alternatively:
store.setItem(<key>, <value>);
并再次检索值:
val = store[<key>]; //or alternatively:
val = store.getItem(<key>);
要将您的 javascript 对象保存为存储中的字符串，我建议使用 JSON.stringify() 和 JSON.parse()，如下所示:
store.setItem("todos", JSON.stringify(todos));
todos = JSON.parse(store.getItem("todos"))
这里的“待办事项”几乎可以是任何没有循环引用的东西，因为这会混淆 JSON 解析器；>
关于javascript - 带有 localStorage 的待办事项应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41803840/
26
4
0
我是 Angular 新手。使用 $localstorage(ngStorage) 是否有任何特定的原因而不是常规的 javascript localstorage 有什么区别。 谁能给我解释一下吗？
这个问题说明了一切。我意识到所有选项都可以在最新的浏览器中使用，但是语义上最好的选择是什么？为什么？ 最佳答案 根据 W3C 标准，正确的是 window.localStorage，因为 localS
我想不出一个好的标题，所以希望可以。 我正在做的是创建一个离线 HTML5 webapp。 “出于某些原因”我不希望将某些文件放在缓存 list 中，而是希望将内容放在 localStorage 中。
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我最近问过a question about LocalStorage 。使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我在将本地存储的定价添加到其他字段时遇到问题。如果我将 beforeNoonNPSlot 的价格设置为 2，但我将 matineeNPSlot 的字段留空(它应该保留分配给的任何价格)最后)。然后在我
我需要从 localStorage 对象变量中删除对象键而不从 localStorage 中删除键 let obj = localStorage; let keys = Object.keys(loc
根据我所读到的内容，我希望以下代码能够工作。 此代码是函数的一部分，该函数应该通过用下一个更高的 localStorage 变量覆盖它来删除 localStorage 变量。一旦没有更多内容可供复制，
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: JavaScript property access: dot notation vs. brackets? 我是
编写localStorage['key'] = value或localStorage.setItem('key', value)有区别吗？ 我看到了this question标记为重复，但在开发人员工
我一直在做以下事情: var store = window.localStorage; store.setItem() 但现在我看到代码是这样做的: localStorage.setItem() 两者
我在 Chrome 上遇到此错误。不知道为什么会发生。任何帮助!我正在使用 Backbone.localStorage 插件和 Backbone。我在以下行中收到错误: localStorage: B
如果我尝试以下代码: var c = new Backbone.Collection(); c.localStorage = new Backbone.LocalStorage("items");
我想使用 localStorage 存储用户输入值，然后在倒计时器中使用该值。 这是用户输入数据的 HTML: Work Time
我有一个适用于 Mac 和 Linux 用户但不适用于 Windows 用户的 Chrome 扩展程序。当我进入控制台并在 localStorage 中设置一个项目时，它工作正常，但是当用户尝试使用扩
在这里浏览所有问题/答案，但找不到解决我的问题的方法。条件('localStorage' in window)返回 true但是 localStorage 的对象本身仍然是 undefined . 设
使用下面的代码，我创建一个 localstorage 变量，如果未定义，则其键为 quote = 1。然而，当最终使用相同的引号键再次调用它时，即使使用了 Number() 函数，它也会变成 11 而
我上次检查时，以下两行返回 true: null == localStorage["foo"]; null == localStorage.getItem("foo"); 将 null 替换为 und
我正在尝试在 NextJS 静态站点上使用 localStorage，但遇到 localStorage 未定义错误。 我的错误显示组件的代码是: export default function Cat
我是一名优秀的程序员,十分优秀！