使用本地存儲的HTML5文本字段歷史記錄

我有這個代碼用於我使用的簡單搜索功能。我想使用HTML5本地存儲功能添加歷史日誌。我試圖看看例子，但我不是很好的網頁編碼器，所以我不太瞭解如何修改我的表單上的例子。使用本地存儲的HTML5文本字段歷史記錄

我想要做的就是將文本框中的文本保存到列表框中，這樣我就可以輕鬆地加載上次搜索到的文本。

<html lang="en"> 
<head> 
    <title>Test</title> 
    <meta charset="utf-8> 
     <link rel="stylesheet" type="text/css" href="test.css"> 
</head> 
<body onLoad="document.getElementById('txtNummer').focus();"> 
    <center> 
<article> 
    <table> 
    <tr> 
     <td style="text-align: center"> 
      <font size="22">S&ouml;k order</font> 
      </td> 
    </tr> 
    <tr> 
     <td> 
     <form action="test.php" method="post"> 
<input style="font-size: 44pt; text-align: center" size="9" type="text" name="txtNummer" id="txtNummer"/> 
<input type="submit" value="submit""> 
     </form> 
     </td> 
    </tr> 
</table> 
</article> 
    </center> 
</body> 
</html>

感激的例子。

來源

2014-06-16 Charkel

我爲你創建了一個樣本。點擊按鈕時，它將input的值保存爲ID test。

它檢查HTML存儲功能是否可用並使用它來保存。

爲了您的方便，我添加了一條提醒來顯示結果。

function saveText() 
{ 
    var e = document.getElementById('test'); 

    if(typeof(Storage) !== 'undefined') 
    { 
     var currentValue = localStorage.getItem('test'); 

     if (currentValue.length == 0) 
     { 
      currentValue = e.value; 
     } 
     else 
     { 
      currentValue = currentValue + '\n' + e.value; 
     } 

     localStorage.setItem('test', currentValue); 

     alert('current value:\n\n' + localStorage.getItem('test')); 
    } 
    else 
    { 
     alert('Cannot access local storage.'); 
    } 
}

使用與這個網站：

<input type="text" id="test" /> 
<button onclick="javascript:saveText()">save</button>

而且fiddle。

來源

2014-06-16 09:34:13

@Charkel：需要更多幫助？此答案對您有所幫助？ –

當我嘗試小提琴示例時，沒有任何反應。我一直在試着看代碼幾次，但我真的不知道如何讓它工作。我試圖將結果從文本框更改爲其他內容，但沒有成功。我在Mac上嘗試了Chrome和Safari瀏覽器的例子。 – Charkel

您的瀏覽器是否支持此功能？ –

使用本地存儲的HTML5文本字段歷史記錄

回答

相關問題