使用本地存储的HTML5文本字段历史记录日志

时间:2014-06-16 09:22:57

标签: html5 local-storage storage local

我有这个代码用于我使用的简单搜索功能。我想使用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>

感谢举例。

1 个答案:

答案 0 :(得分:0)

我为你创建了一个样本。单击按钮时,它会保存标识为input的{​​{1}}的值。

它会检查HTML存储功能是否可用并使用它进行保存。

为方便起见,我添加了一个提醒,告诉您结果。

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.');
    }
}

fiddle