Как сделать, чтоб сохранилась созданная javascript'ом кнопка после обновления стр.?
Недавно начал изучать js. Написал html кнопку с привязанной js функцией, при нажатии на которую появляется 2 prompt окна где надо написать ссылку на какой либо сайт и задать этой ссылке какое либо имя, после чего создается кнопка-ссылка на указанный нами сайт. После перезагрузки страницы кнопка исчезает. Как сделать так чтоб она сохранилась?
js код этой кнопки:
var numId = 2;
function add(){
var p = document.getElementById('box');
var link = prompt('Введите адрес ссылки');
var linkName = prompt('Введите имя ссылки не более 15 символов');
if(link == null || link == "" || linkName == null || linkName == "") {
alert('Ошибка: ссылка или имя ссылки небыли указаны');
console.log("Error: link or linkName equal")
} else {
var lengthName = linkName.length;
if(lengthName > 15) {
alert('Имя ссылки должно содержать не более 15 символов');
} else {
numId++;
p.innerHTML += '<div class="button-block" id="button-block' + numId + '"><form action="http://' + link + '/" target="_blank"><button class="button">' + linkName + '</button></form><button class="delete-button" onclick="del()">X</button></div>';
}
}
}
|
IDigle1,
искать документацию и примеры с LocalStorage |
Наверное как то так!
var numId = 2;
document.getElementById('box').innerHTML = localStorage.getItem('data');
function add(){
var p = document.getElementById('box');
var link = prompt('Введите адрес ссылки');
var linkName = prompt('Введите имя ссылки не более 15 символов');
if(link == null || link == "" || linkName == null || linkName == "") {
alert('Ошибка: ссылка или имя ссылки небыли указаны');
console.log("Error: link or linkName equal")
} else {
var lengthName = linkName.length;
if(lengthName > 15) {
alert('Имя ссылки должно содержать не более 15 символов');
} else {
numId++;
p.innerHTML += '<div class="button-block" id="button-block' + numId + '"><form action="http://' + link + '/" target="_blank"><button class="button">' + linkName + '</button></form><button class="delete-button" onclick="del()">X</button></div>';
localStorage.setItem('data', p.innerHTML);
}
}
}
|
Может я где накосячил, но после этого вообще весь контент исчез, кроме одного дива)
|
document.getElementById('box').innerHTML += localStorage.getItem('data');
тогда вот так, поправьте вторую строчку |
Спасибо большое, работает) Вот только функция удаления кнопки перестала работать) и над кнопкой надпись null появилась
|
нужен полный html чтобы мы вам помогли без гадания на кофейной гуще :)
|
Еще раз спасибо вам огромное за помощь, друг мой:) проблему свою я уже решил. Если вдруг интересно что у меня за зверь получился вот:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Меню</title>
</head>
<body>
<div class="box" id="box"><!-- меню с кнопками -->
<div class="add-del-box"><!-- контейнер с кнопкой "добавить" -->
<button class="button" onclick="add()" id="add">Добавить</button>
</div>
</div>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
button {
cursor: pointer;
}
div.box { /* меню с кнопками */
position: relative;
padding: 50px;
background: rgb(100,100,100);
width: 350px;
height: 1000px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.add-del-box { /* контейнер с кнопкой "добавить" */
position: fixed;
background: rgb(80,80,80);
width: 450px;
height: 200px;
left: 0;
bottom: 0;
height: 70px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
text-align: center;
}
.button { /* кнопки-ссылки */
display: inline-block;
font-size: 20px;
color: black;
margin-top: 10px;
width: 250px;
height: 50px;
background: pink;
border: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transition: 0.2s;
}
.button-block form {
display: inline-block;
}
.delete-button { /* кнопка удаления кнопки-ссылки */
display: inline-block;
font-size: 20px;
color: black;
margin: 10px;
width: 50px;
height: 50px;
background: pink;
border: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.button:hover {
color: blue;
margin-left: 10px;
}
.add { /* Кнопка "добавить" */
font-size: 20px;
color: black;
margin-top: 10px;
width: 250px;
height: 50px;
background: pink;
border: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
<script type="text/javascript">
var numId = 1;
numId = localStorage.getItem('numId');
document.getElementById('box').innerHTML += localStorage.getItem('data' + numId);
function add(){
var p = document.getElementById('box');
var link = prompt('Введите адрес ссылки');
var linkName = prompt('Введите имя ссылки не более 15 символов');
if(link == null || link == "" || linkName == null || linkName == "") {
alert('Ошибка: ссылка или имя ссылки небыли указаны');
console.log("Error: link or linkName equal")
} else {
var lengthName = linkName.length;
if(lengthName > 15) {
alert('Имя ссылки должно содержать не более 15 символов');
} else {
numId++;
p.innerHTML += '<div class="button-block" id="button-block' + numId + '"><form action="http://' + link + '/" target="_blank"><button class="button">' + linkName + '</button></form><button class="delete-button" onclick="del()">X</button></div>';
localStorage.setItem('data' + numId, p.innerHTML);
localStorage.setItem('numId', numId);
}
}
}
function del() { //функция удаления кнопки
var g = document.getElementById('button-block' + numId);
localStorage.removeItem('data' + numId);
g.outerHTML = '';
numId--;
}
</script>
</body>
</html>
И все же есть вопрос. Как избавится от этого null, который появился выше кнопок? Все таки есть баг. после перезагрузки если удалить одну ссылку - удаляются все. |
Цитата:
if (localStorage.getItem('data' + numId)) document.getElementById('box').innerHTML += localStorage.getItem('data' + numId);
|
второй баг у меня не наблюдается :(
|
У меня почему то наблюдался. Проблема была в том, что после удаления кнопки, в локальном хранилище переменная numId не уменьшалась на единицу. Исправил, добавив в конец функции удаления строчку: localStorage.setItem('numId', + numId);
|
| Часовой пояс GMT +3, время: 16:49. |