Здравствуйте! Мне необходимо сделать так, чтобы пользовательские элементы не пропадали при перезагрузке страницы. Я понимаю, что для этого нужен localStorage, но никак не могу его применить на своем коде. Буду очень признателен за помощь.
class MyElement extends HTMLElement {
constructor() {
super();
}
render() {
let html = document.importNode(myWebCompTemplate.content, true);
this.attachShadow({ mode: 'open' })
this.shadowRoot.appendChild(html);
let bob = this
place.insertAdjacentElement('afterbegin', bob);
let but = this.shadowRoot.querySelector('.webButton')
but.addEventListener('click', function (e) {
let color = but.previousElementSibling
let type = color.previousElementSibling
let name = type.previousElementSibling
let square = name.previousElementSibling
if (but.getAttribute('toggle') == 'on') {
but.setAttribute('toggle', 'off')
openModalChange()
} else {
type.firstElementChild.textContent = document.querySelector('#typeChange').value
name.firstElementChild.textContent = document.querySelector('#nameInpCh').value
color.firstElementChild.textContent = document.querySelector('.helpBlockCh').getAttribute('temp')
square.firstElementChild.style.backgroundColor = document.querySelector('.helpBlockCh').getAttribute('temp')
but.setAttribute('toggle', 'on')
document.querySelector('#typeChange').value = 'Main'
document.querySelector('#nameInpCh').value = ''
}
})
let del = this.shadowRoot.querySelector('.delete')
del.addEventListener('click', function (e) {
bob.remove()
})
this.draggable = true
}
connectedCallback() {
if (!this.rendered) {
this.render();
this.rendered = true;
}
}
disconnectedCallback() {
}
static get observedAttributes() {
return ['name', 'type', 'color'];
}
attributeChangedCallback(name, oldValue, newValue) {
this.render()
}
}
let Test = document.querySelector(".popup-button")
Test.addEventListener("click", function (e) {
let nod = document.createElement('my-webcomp')
let parent = document.body.appendChild(nod)
let colorObj = {}
parent.shadowRoot.querySelector('#type').textContent = document.querySelector('#typeId').value
parent.shadowRoot.querySelector('.name').textContent = document.querySelector('#nameInp').value
parent.shadowRoot.querySelector('.color').textContent = document.querySelector('.helpBlock').getAttribute('temp')
parent.shadowRoot.querySelector('.color-square').style.backgroundColor = document.querySelector('.helpBlock').getAttribute('temp')
colorObj = {
name: document.querySelector('#nameInp').value,
type: document.querySelector('#typeId').value,
color: document.querySelector('.helpBlock').getAttribute('temp')
}
localStorage.setItem('color' + colorObj.name, JSON.stringify(colorObj));
let colorren = JSON.parse(localStorage.getItem('color' + colorObj.name));
document.querySelector('#typeId').value = 'Main'
document.querySelector('#nameInp').value = ''
})
customElements.define("my-webcomp", MyElement);
