Блог

Главная - Вопросы по программированию - Как я могу использовать localstorage для отображения значений на моей веб-странице с помощью JavaScript?

Как я могу использовать localstorage для отображения значений на моей веб-странице с помощью JavaScript?

#javascript #html #local-storage

Вопрос:

Я выполняю миссию по созданию простой веб-страницы с полем ввода и кнопкой на моей HTML-странице. Используя JavaScript, мне нужно сохранить входные данные в localstorage, с которым я начал работать. Однако, когда я нажимаю кнопку, я хочу, чтобы сохраняемое значение отображалось в новом элементе div, созданном в JavaScript, вместе с кнопкой удаления, чтобы удалить элемент из локального хранилища.

HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="inp-value">
    <button id="btn">Klicka här!</button>

    <script src="script.js"></script>
</body>
</html>

язык JavaScript:

 const btn = document.getElementById("btn");

btn.onclick = function(){
    const value = inpValue.value;

    localStorage.setItem("Name", value);
    
};

Ответ №1:

Используйте эти

Хранилище.GetItem()

 const storedName = localStorage.getItem("Name");

Хранение.Удалить элемент()

 localStorage.removeItem("Name");

Документация: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Комментарии:

1. Спасибо, но это не помогает мне отображать значение localstorage на моей веб-странице в новом div :/

2. document.querySelector('#div_id_for_display').innerHTML = storedName; будет работать

3. script.js:8 Неучтенная ошибка типа: Не удается установить свойства null (установка «innerHTML») в HTMLButtonElement.btn.onclick появилось это сообщение об ошибке

4. У вас есть div для показа? если нет, добавьте <div id="div_id_for_display"></div> в свой html

5. Это задание не позволяет мне создавать div внутри html, предполагается, что это делается в JavaScript при нажатии кнопки

Ответ №2:

Вот ваше решение.

Код Javascript

  <script>
       
        btnClick = function () {
            var inputValue = document.getElementById("inp-value").value;
            var ul = document.getElementById("list");
            var li = document.createElement("li");
            var listItems = ul.getElementsByTagName('li');

            localStorage.setItem(`item-${listItems.length   1}`, inputValue);

            var html = `<li  id="item-${listItems.length   1}"><div><lable>${inputValue}</lable> <button onclick="removeClick(${listItems.length   1})" >X</button></div> </li>`
            ul.innerHTML  = html;

        };
        removeClick = function (item_id) {
          
            var ul = document.getElementById("list");
            localStorage.removeItem(`item-${item_id}`);
            ul.removeChild(ul.childNodes[item_id]);
        }
    </script>

HTML

 <body>
    <input type="text" name="" id="inp-value">
    <button id="btn" onclick="btnClick()">Klicka här!</button>

    <ul id="list">

    </ul>
</body>
Метки: