сохраненные данные в локальном хранилище, их извлечение и отображение с помощью Java Script

ProgramBox

сохраненные данные в локальном хранилище, их извлечение и отображение с помощью Java Script

Post author:admin
Запись опубликована:1 сентября, 2022
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь сохранить пользовательский ввод в локальном хранилище, затем извлечь его и отобразить с помощью JavaScript. Я получаю сообщения об ошибках:

Не удается прочитать свойство 'innerHTML' null

key не определено

 <body>
    <fieldset>
        <legend>Insert Data</legend>
            <input type="text" id="inputKey" placeholder="enter key">
            <input type="text" id="inputValue" placeholder="enter value">
            <button type="submit" id="insertBtn">Insert Data</button>
    </fieldset>
    <fieldset>
       <legend>local Storage</legend>
       <h3 id="lsOutput"></h3>
    </fieldset>

<script>

let inputKey = document.getElementById('inputKey');
let inputValue = document.getElementById('inputValue');
let inputButton = document.getElementById('insertBtn');
let output = document.getElementById('IsOutput');
inputButton.addEventListener("click", store);
function store(){
     const key = inputKey.value;
     const value = inputValue.value;

  if( key amp;amp; value){

      localStorage.setItem(key, value);

    //   location.reload();   
  }
}
  for(const i = 0 ; i < localStorage.length; i  ){
      const getKey = localStorage.key(i);
      const getValue = localStorage.getItem(key);
      output.innerHTML  = `${getKey}: ${getValue}`;
  }
</script>
</body>
</html>

1. В вашем коде есть несколько ошибок и ошибок. Пожалуйста, попробуйте отладить его и включите свои попытки здесь. Для этого прочитайте idownvotedbecau.se/nodebugging и idownvotedbecau.se/nomcve

2. Спасибо. я пройду через это.

Ответ №1:

Вам просто нужно изменить ключ на переменную getKey:

 const getKey = localStorage.key(i);
const getValue = localStorage.getItem(getKey);

Ответ №2:

несколько ошибок:
IsOutput вместо lsOutput
Вы должны проверить undefined значение в javascript ( key и value )
В цикле i , которое не может быть константой (потому что вы увеличиваете его …)

 <html>
<head> 
</head>    
<body>
    <fieldset>
        <legend>Insert Data</legend>
        <input type="text" id="inputKey" placeholder="enter key">
        <input type="text" id="inputValue" placeholder="enter value">
        <button type="submit" id="insertBtn">Insert Data</button>
    </fieldset>
    <fieldset>
        <legend>local Storage</legend>
        <h3 id="lsOutput"></h3>
    </fieldset>

    <script>
        let inputKey = document.getElementById('inputKey');
        let inputValue = document.getElementById('inputValue');
        let inputButton = document.getElementById('insertBtn');
        let output = document.getElementById('lsOutput');
        inputButton.addEventListener("click", store);
        function store() {
            const key = inputKey.value;
            const value = inputValue.value;

            if (key != "undefined" amp;amp; value != "undefined" ) {

                localStorage.setItem(key, value);

                for (let i = 0; i < localStorage.length; i  ) {
                    const getKey = localStorage.key(i);
                    const getValue = localStorage.getItem(key);
                    output.innerHTML  = `${getKey}: ${getValue}`;
                }
            }
        }
    </script>
</body>

</html>

Ответ №3:

 const getKey = localStorage.key(i);

Я думаю, вы не можете этого сделать, потому что key не является методом объекта localStorage,

Можно использовать только GetItem, setItem, removeItem и clear

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Ответ №4:

вероятно, вы хотите использовать GetItem (ключ)

   for(let i = 0 ; i < localStorage.length; i  ){
      const getKey = localStorage.getItem(key[i]);
      const getValue = localStorage.getItem(key);
      output.innerHTML  = `${getKey}: ${getValue}`;
  }

Обратите внимание, что я также немного изменил ваш цикл. Здесь следует использовать let , а не const , так как переменная будет увеличиваться в каждом цикле. кроме того, вы хотите использовать скобки при получении определенного элемента в цикле, а не в параграфах.

кроме того, как только у вас есть свой ключ, у вас также есть свое значение.

Рассмотрим это:

 localStorage.setItem('some key', 'some value');
const item = localStorage.getItem('some key');
console.log(item);
// -> 'some value'

Ответ №5:

У вас есть опечатка в вашем HTML, в вашем JavaScript вы ищете идентификатор IsOutput , но называете свой элемент lsOutput . Помните, что запрос на несуществующие элементы возвращает null.

Кроме того, попробуйте использовать getItem вместо key

Ответ №6:

 Cannot read property 'innerHTML' of null

Это связано с тем, что ваш элемент недоступен. Вместо IsOutput появляется ошибка типа LsOutput

Также проверьте эту строку, кажется неправильной?

   for(const i = 0 ; i < localStorage.length; i  ){
      const getKey = localStorage.key(i);
      const getValue = localStorage.getItem(key); 
     //above line seems wrong instead of key it should be getKey 
      output.innerHTML  = `${getKey}: ${getValue}`;
  }

Проблема заключается в том, что ваша ошибка типа LsOutput вместо IsOutput, т.е. Не является LS