点击一次只追加一次新元素，并将其保存到本地存储html javascript [英] Append new Element only once on click and save it to local storage html javascript

问题描述

这里是 JS Fiddle ！

我的问题是，我想在按钮点击后仅添加一次新元素，并且将它保存到localStorage，这样我就不会在刷新或任何其他操作时丢失状态。

  div {
 text -居中对齐; 
} 
 #Neighborhood {
 color：brown; 
} 
 #NewElement {
颜色：绿色; 
} 
 
< div id =Neighborhood> 
< div id =Neighbor1> Neighbor 1< / div> 
< div id =Neighbor2> Neighbor 2< / div> 
< div id =Neighbor3>邻居3< / div> 
< / div> 
< input type =buttononclick =add_prev（）; value =ACTION> 
 
 / *添加Element BEFORE NeighborElement * / 
 Element.prototype.appendBefore = function（element）{
 element.parentNode.insertBefore（this ，元素）; 
}，false; 
 $ b $ * / *添加Element AFTER NeighborElement * / 
 Element.prototype.appendAfter = function（element）{
 element.parentNode.insertBefore（this，element.nextSibling）; 
}，false; 
 $ b $ *典型的创建和设置一个新的孤立元素对象* / 
 
 add_prev = function（）{
 
 var NewElement = document.createElement 'DIV'）; 
 NewElement.innerHTML ='新元素'; 
 NewElement.id ='NewElement'; 
 NewElement.appendBefore（document.getElementById（'Neighbor2'））; 
} 
  

我很感谢每一个提示或解决方案！干杯！

解决方案

将 传递给 onclick 功能。这样，在你做完事情之后，只需移除监听器来点击或禁用按钮。

另外，当页面加载时，从存储中加载信息，if这是真的，直接调用该函数，然后禁用该按钮。
也许这不是你所需要的，但它可以帮助很多，你可以按照这个逻辑来达到目的。下面的代码仅仅是一个例子。

OBS ：在这里不会有效，因为 localStorage 不允许在StackOverflow。

在这个小提琴中，您可以尝试一下： https ：//jsfiddle.net/so5u1c4z/

在上面的小提琴中，创建元素，然后保存并重新加载页面。这个元素将在页面加载完成后存在。

$（document）。 ready（function（）{add_prev = function（elem）{var NewElement = document.createElement（'div'）; NewElement.innerHTML ='New Element'; NewElement.id ='NewElement'; document.getElementById（'Neighbor2'） .append（NewElement）; localStorage.setItem（'elementCreated'，true）; if（elem）{$（elem）.attr（'disabled'，true）;}} var isCreated = localStorage.getItem（'elementCreated'）; if（isCreated）{add_prev（）; $（＃btnAdd）。attr（'disabled'，true）;}}）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js >< / script>< input type =buttononclick =add_prev（this ）; value =ACTIONid =btnAdd>< div id =Neighbor2>< / div>  

Here is JS Fiddle!

I am trying to append new Elements to the div, this is working.

My problem is that I want to append the new element only once on button click, and save it to localStorage so that I would not loose the state on refresh or any other action.

div {
text-align: center;
}
#Neighborhood {
color: brown;
}
#NewElement {
color: green;
}

<div id="Neighborhood">
    <div id="Neighbor1">Neighbor 1</div>
    <div id="Neighbor2">Neighbor 2</div>
    <div id="Neighbor3">Neighbor 3</div>
</div>
<input type="button"onclick="add_prev();" value="ACTION">​

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function (element) {
element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function (element) {
element.parentNode.insertBefore(this, element.nextSibling);
}, false;

/* Typical Creation and Setup A New Orphaned Element Object */

add_prev = function () {

var NewElement = document.createElement('div');
NewElement.innerHTML = 'New Element';
NewElement.id = 'NewElement';
NewElement.appendBefore(document.getElementById('Neighbor2'));
}   

I am thankful for every tip or solution! Cheers!

解决方案

Pass this to the onclick function. That way, after you do your things, just remove the listener to click or disable the button.

Also, when the page loads, load the information from the storage, if it's true, directly call the function and then disable the button. Maybe it isn't exaclty what you need, but it can help a lot, you can follow this logic to get there. The code below is just an example.
OBS: it won't work well here because localStorage is not allowed in StackOverflow.

In this fiddle you can try it better: https://jsfiddle.net/so5u1c4z/
On the fiddle above, create the element, then save and reload the page. the element will be there once the page loads.

$(document).ready(function(){

 add_prev = function (elem) {
    var NewElement = document.createElement('div');
    NewElement.innerHTML = 'New Element';
    NewElement.id = 'NewElement';
    document.getElementById('Neighbor2').append(NewElement);
   localStorage.setItem('elementCreated', true);
    if (elem){
      $(elem).attr('disabled', true);    
    }
  } 

  var isCreated = localStorage.getItem('elementCreated');
  if (isCreated){
    add_prev();
    $("#btnAdd").attr('disabled', true); 
  }
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="add_prev(this);" value="ACTION" id="btnAdd">
<div id="Neighbor2"></div>

这篇关于点击一次只追加一次新元素，并将其保存到本地存储html javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！