2

我正在测试 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>
4

3 回答 3

3

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

于 2012-07-26T16:23:17.703 回答
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;
}​

这里的工作示例

于 2012-07-26T16:23:16.207 回答
1

html 事件处理程序中的代码可以像这样有效地运行：

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

所以你write的影子（它调用document.write）。您可以简单地参考正确的写法window.write()：

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

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

于 2012-07-26T16:34:50.067 回答