localStorage清除屏幕

我測試localStorage以查看它是否可以在我的應用程序中使用，但是當我嘗試將文本輸入框中的數據存儲到它時，屏幕變爲空白。我怎樣才能解決這個問題？下面是代碼：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>

來源

2012-07-26 Alwaysdeadfred

你在測試什麼瀏覽器（包括版本）？ – 2012-07-26 16:22:05

我在最新版本的Chrome中測試過它。 – Alwaysdeadfred 2012-07-26 16:41:12

您不能使用對全球（document）命名空間稱爲write功能...叫別的東西，它工作正常

<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

來源

2012-07-26 16:23:16 ManseUK

jinx！你欠我一杯蘇打水。 – jbabey 2012-07-26 16:23:38

@ jbabey :-)如果你排序*最早*我先到那裏（只）:-) – ManseUK 2012-07-26 16:25:30

謝謝，這工作！ – Alwaysdeadfred 2012-07-26 16:33:54

變化你的函數名稱從write改爲別的。這聽起來像是你不小心調用了document.write，這會使你的整個頁面空白。

來源

2012-07-26 16:23:17 jbabey

+1正是我在想什麼！ – ManseUK 2012-07-26 16:24:30

HTML事件處理程序中的代碼運行有效，如：

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

所以你write被遮擋時（它調用document.write）。你可以簡單地指向正確的寫操作與window.write()：

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

歸根結底，最好不要在所有使用內嵌HTML事件。一個簡單的button.onclick = write會工作，其中button是引用元素。

來源

2012-07-26 16:34:50 Esailija

+1對事件處理程序運行方式的很好的解釋 – ManseUK 2012-07-26 16:39:44

@ManseUK其實我是指html事件處理程序，比如'onclick =「blaa;」'，當然不是真正的事件處理程序。我忘了指定 – Esailija 2012-07-26 16:41:12

我從不使用HTML事件處理程序 - 或者使用'attachEvent' /'addEventListener'或使用框架進行連接 - 所以很高興能夠更好地理解它們！ – ManseUK 2012-07-26 16:53:04

localStorage清除屏幕

回答

相關問題