Saving an html element to localStorage and output
There is a method that adds new div's to the page.
function add_element() {
var parent = document.getElementById('component');
var newelem = document.createElement('form');
var title = document.createElement('input');
var content = document.createElement('input');
newelem.appendChild(title);
newelem.appendChild(content);
parent.appendChild(newelem);
save_element();
function save_element(){
const parsed = JSON.stringify(parent);
localStorage.setItem('hiDen', parsed);
}
}
function get_element() {
return JSON.parse(localStorage.getItem('hiDen'));
}
window.add = add_element;
window.get_el = get_element;
Html code in the body
<div>
<form>
<input type="button" id="button_modal" value="Добавить" onclick="modal_open()"/>
</form>
</div>
<div id="component">
</div>
<div class="modal" id="modalDialog">
<form method="post" name="modalwindowpush">
<input type="text" name="title">
<input type="text" name="content">
</form>
<input type="submit" value="Закрыть" onclick="modal_close()">
<input type="button" value="Сохранить" onclick="add(); get_el()">
</div>
Javascript functions are written in the head (Here is only one of them - which is important for the situation). If it has a value - the "Save" button in the modal window of the page. But after the page is reloaded, the new div's disappear. What am I doing wrong? Does it matter that this is a JSP page?
2 answers
The problem is that you are trying to convert the DOM element using JSON. stringify. Try doing something similar:
function save_element(){
const html = parent.innerHTML; //или целиком parent.outerHTML
localStorage.setItem('hiDen', html);
}
Based on the question, based on your code:
var parent = document.getElementById('component');
function add_element() {
var newelem = document.createElement('form');
var title = document.createElement('input');
var content = document.createElement('input');
newelem.appendChild(title);
newelem.appendChild(content);
parent.appendChild(newelem);
save_element();
function save_element(){
const parsed = parent.innerHTML;
localStorage.setItem('hiDen', parsed);
}
}
function get_element() {
parent.innerHTML = localStorage.getItem('hiDen');
}
//сохраняете ваш элемент
add_element();
//выводите
get_element();
Take a look at the example: jsfiddle.net/mcuk4avf
- Click "Add item"
- Reloading the page
- Click "Get item" - the item is inserted
- Click "Clear storage"
- Reload it page
- Click "Get item" - the item is no longer in the storage.
- You can repeat step 1.
Updated:
Since you said that you have a JSP page(I can't help you with that), you should understand where and how your page is generated.
Here is the answer why your code doesn't work:
Https://stackoverflow.com/questions/42568167/how-to-display-localstorage-values-on-jsp
Next, you you should rewrite your code yourself to access localStorage in the browser, not on the server.
And the casket just came off - I deployed the local host. And when the client interacts with the local host, localStorage does not work. I apologize for distracting you with such nonsense.