Javascript 使用localStorage创建应用程序的步骤
我目前正在编写一个简单的香草JavaScript待办应用程序。一切看起来都很好，但是当涉及到在新的localStorage中保存数据时，我做不到，我从来没有使用过localStorage，我读过很多文章，当我尝试简单的东西时，它可以工作，但我无法使我的应用程序正常工作。我想保存输入的数据以便刷新，它不会消失，就像现在一样。。。这是应用程序的链接 ****我想用VANILLA JAVASCRIPT，而不是JQUERY**** 所以基本上，如果用户做了几个TODO，当刷新时，我希望一切都保持不变，就像在图像中一样 HTML:Javascript 使用localStorage创建应用程序的步骤,javascript,html,local-storage,Javascript,Html,Local Storage,我目前正在编写一个简单的香草JavaScript待办应用程序。一切看起来都很好，但是当涉及到在新的localStorage中保存数据时，我做不到，我从来没有使用过localStorage，我读过很多文章，当我尝试简单的东西时，它可以工作，但我无法使我的应用程序正常工作。我想保存输入的数据以便刷新，它不会消失，就像现在一样。。。这是应用程序的链接 ****我想用VANILLA JAVASCRIPT，而不是JQUERY**** 所以基本上，如果用户做了几个TODO，当刷新时，我希望一切都保持不变，
<body>
<div class="holder">
<div>
<input type="text" />
</div>
<button id="add">Add</button>
<div class="results"></div>
</div>
</body>
添加
document.addEventListener（'DOMContentLoaded'，function（）{
设holder=document.querySelector（“.holder”），
addBtn=document.querySelector（“#add”），
removeBtn=document.querySelector（“#remove”），
resultBox=document.querySelector（'.results'）；
让input=document.getElementsByTagName（'input'）[0]；
函数集合属性（元素、属性）{
用于（让我输入属性）{
setAttribute（i，attrs[i]）；
}
}
设置属性（输入{
'占位符'：'输入待办事项'，
“名称”：“待办事项”
});
函数addtoBtn（）{
addBtn.addEventListener（'click'，函数（事件）{
如果（输入值！=''）{
让openingDiv=''；
让closingDiv='EditSaveRemove'；
resultBox.innerHTML+=openingDiv+input.value+closingDiv；
input.value=''；
event.preventDefault（）；
}否则{
警报（“进入待办事项！”）；
}
让innerBtn=document.querySelectorAll（'.removeBtn'）；
让editBtn=document.querySelectorAll（'.edit'）；
让saveBtn=document.querySelectorAll（'.save'）；
for（让集合=0；集合我正在从事一个类似的项目，下面是一个将html保存到本地存储的示例代码
var myToDos= document.getElementById('myToDos');
var htmlHolder = { "htmlToDo": myToDos.outerHTML };
localStorage.setItem('myStorage', JSON.stringify(htmlHolder ));
您可以使用以下命令检索它
var myStorage = JSON.parse(localStorage.getItem('myStorage'));
为了加载html元素，您需要使用DOMParser，然后将其附加到您的工作区
var parsedHTML = new DOMParser().parseFromString(myStorage.htmlToDo, "text/html");
请注意，“text/html”将返回包含标题和正文的完整html源代码，通过检查控制台上的输出并使用.lastElementChild等访问相关子级来获取所需元素。因为您的容器可能会容纳很多子节点，所以您所要做的就是在.children节点列表中循环
我告诉你这是完全可能的，因为我自己是在非常绝望的情况下做的。但请注意，本地存储非常小，根据浏览器配额的不同，只有大约4-10mb的容量不受限制。使用本地存储实际上非常简单：
给自己找一份推荐信：
store = window.localStorage;
然后，您可以像在任何其他键值对容器中一样在其中存储内容：
store[<key>] = <value>; //or alternatively:
store.setItem(<key>, <value>);
这里的“TODO”几乎可以是任何没有循环引用的东西，因为这会混淆JSON解析器；> 使用原始代码：
document.addEventListener('DOMContentLoaded',function(){
let history = JSON.parse(localStorage.getItem("todoHistory")) || [];
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 applyNewEntry(entry){
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 + entry + closingDiv;
event.preventDefault();
return true;
}
return false;
}
function addtoBtn(){
addBtn.addEventListener('click',function(event){
if(applyNewEntry(input.value)){
history.push(input.value);
input.value = '';
localStorage.setItem("todoHistory", history);
}
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();
});
document.addEventListener（'DOMContentLoaded'，function（）{
让history=JSON.parse（localStorage.getItem（“todoHistory”））| |[]；
addBtn=document.querySelector（“#add”），
removeBtn=document.querySelector（“#remove”），
resultBox=document.querySelector（'.results'）；
让input=document.getElementsByTagName（'input'）[0]；
函数集合属性（元素、属性）{
用于（让我输入属性）{
setAttribute（i，attrs[i]）；
}
}
设置属性（输入{
'
val = store[<key>]; //or alternatively:
val = store.getItem(<key>);
store.setItem("todos", JSON.stringify(todos));
todos = JSON.parse(store.getItem("todos"))
document.addEventListener('DOMContentLoaded',function(){
let history = JSON.parse(localStorage.getItem("todoHistory")) || [];
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 applyNewEntry(entry){
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 + entry + closingDiv;
event.preventDefault();
return true;
}
return false;
}
function addtoBtn(){
addBtn.addEventListener('click',function(event){
if(applyNewEntry(input.value)){
history.push(input.value);
input.value = '';
localStorage.setItem("todoHistory", history);
}
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();
});