Question

我正在测试localStorage以查看它是否可以在我的应用中使用，但是当我尝试将数据从文本输入框存储到它时，屏幕变为空白。我怎样才能解决这个问题？这是代码：

<html>
<head>
<script type="text/javascript">
function write() {
localStorage.setItem('item',  document.getElementById('input').value);
}

function read() {
var data = localStorage.getItem('item');
document.getElementById('display').innerHTML = data;
}
</script>
</head>
<body>
<input id="input" type="text" />
<button type="button" onclick="write()">
Write
</button>
<p id="display">
Display
</p>
<button type="button" onclick="read()">
Read
</button>
</body>
</html>

Answer 1

将您的函数名称从write更改为其他名称。听起来你不小心调用了document.write，这会使整个页面空白。

Answer 2

您无法在全局（write）命名空间中使用名为document的函数...将其称为其他内容且工作正常

<input id="input" type="text" />
<button type="button" onclick="somethingelse();">
Write
</button>
<p id="display1">
Display
</p>
<button type="button" onclick="read()">
Read
</button>

function somethingelse() {
    localStorage.setItem('item', document.getElementById('input').value);
}

function read() {
    var data = localStorage.getItem('item');
    document.getElementById('display1').innerHTML = data;
}

Working example here

Answer 3

html事件处理程序中的代码有效地运行，如：

with(document) {
    with(this) {
        write();
    }
}

因此您的write被遮蔽（它会调用document.write）。您可以使用window.write()：

简单地引用正确的写入

<button type="button" onclick="window.write()">

最终，最好不要使用内联html事件。一个简单的button.onclick = write就可以了，其中button是对元素的引用。

localStorage清除屏幕

3 个答案: