我正在尝试将用户输入存储在本地存储中，然后检索并使用JavaScript显示。我得到错误说：
无法读取
null的属性'innerHTML'
和
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 && 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>
您只需要将键更改为变量getKey：
const getKey = localStorage.key(i);
const getValue = localStorage.getItem(getKey);
几个错误：IsOutput而不是lsOutput
您必须在javascript中测试undefined值(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" && 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>
const getKey = localStorage.key(i);
我认为您不能这样做，因为密钥不是localStorage对象的方法
只能使用getItem、setItem、removeItem和clear
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
您可能想要使用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'
您的HTML中有一个拼写错误，在JavaScript中，您正在查找idIsOutput，但正在使用lsOutput命名元素。请记住，查询不存在的元素会返回null。
因此，尝试使用getItem而不是key
Cannot read property 'innerHTML' of null
这是因为您的元素不可用。存在类型错误LsOutput而不是IsOutput
也检查这行，似乎错了？
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，即is不是LS