LocalStorage Борьба - PullRequest
Новая
       4

LocalStorage Борьба

0 голосов
/ 03 марта 2020

Пытаюсь напечатать значения внутри текстовых полей на странице.

После нажатия кнопки значения появляются на странице, но только на долю секунды.

Что я могу сделать, чтобы значения остались на странице? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

    <h2>Local Storage - JavaScript <h2>

    <fieldset>
        <legend>Insert Data</legend>
        <input id="inpKey" type="text" placeholder="Enter key...">
        <input id="inpValue" type="text" placeholder="Enter Value...">
        <button type="button" id="btnInsert">Insert Data</button>
    </fieldset>

    <fieldset>
        <legend>Local Storage</legend>
        <div id="lsOutPut"></div>
    </fieldset>


<script src="action.js">

const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const btnInsert = document.getElementById("btnInsert");
const lsOutPut = document.getElementById("lsOutPut");

btnInsert.onclick = function(){
    const key = inpKey.value;
    const value = inpValue.value;

    if(key && value) {
        localStorage.setItem(key, value);
        location.reload();
    }

    for(let i = 0; i < localStorage.length; i++){
        const keyx = localStorage.key(i); 
        const value = localStorage.getItem(keyx); 

        lsOutPut.innerHTML += `${keyx}: ${value}</br> `
    }
}

</script>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 03 марта 2020

В вашем коде у вас есть location.reload(), я предполагаю очистить div с предыдущими значениями. Это перезагружает страницу и вызывает проблему доли секунды. Переключите его на следующее, чтобы снять флажок перед печатью новых значений. 

if(key && value) {
      localStorage.setItem(key, value);
      lsOutPut.innerHTML = '';
}

Хотя это не связано, также стоит отметить, что вы не закрываете тег <h2>. 

<h2>Local Storage - JavaScript</h2>
1 голос
/ 03 марта 2020

В вашем коде у вас есть location.reload(), поэтому он перезагружает страницу, не уверен, почему у вас там есть, но причина: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

    <h2>Local Storage - JavaScript <h2>

    <fieldset>
        <legend>Insert Data</legend>
        <input id="inpKey" type="text" placeholder="Enter key...">
        <input id="inpValue" type="text" placeholder="Enter Value...">
        <input type="button" id="btnInsert" value="Insert Data"/>
    </fieldset>

    <fieldset>
        <legend>Local Storage</legend>
        <div id="lsOutPut"></div>
    </fieldset>


<script>

const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const btnInsert = document.getElementById("btnInsert");
const lsOutPut = document.getElementById("lsOutPut");

btnInsert.onclick = function(){
    const key = inpKey.value;
    const value = inpValue.value;

    if(key && value) {
        localStorage.setItem(key, value);
    }

    for(let i = 0; i < localStorage.length; i++){
        const keyx = localStorage.key(i); 
        const value = localStorage.getItem(keyx); 

        lsOutPut.innerHTML += `${keyx}: ${value}</br> `
    }
}

</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...