HTML5本地存储无法正确存储

3
我不确定我是否理解了“存储”的正确上下文,但根据我使用的一些教程,我使用以下JavaScript代码启用页面本地存储(无会话)提交的数据,但当我关闭页面并重新打开页面时,内容不会出现。

script.js

function initiate()
{
   var saveButton = document.getElementById('save');
   var retrieveButton = document.getElementById('retrieve');
   var deleteButton = document.getElementById('delete');
   var reviewButton = document.getElementById('review');

   saveButton.addEventListener('click', saveItem);
   retrieveButton.addEventListener('click', retrieveItem);
   deleteButton.addEventListener('click', deleteItem);
   reviewButton.addEventListener('click', reviewAll);

}

function saveItem()
{
    var key = document.getElementById('key').value;
    var value = document.getElementById('value').value;
    localStorage[key] = value; 
}

function retrieveItem()
{
    var data = document.getElementById('data');
    var key = document.getElementById('key').value;
    var value = localStorage[key];
    data.innerHTML = '<div>' + key + ': ' + value + '</div>';
}

function deleteItem()
{
    if (confirm('Delete?'))
    {
        var key = document.getElementById('key').value;
        localStorage.removeItem(key);
        data.innerHTML = '<div>Deleted.</div>';
    }    
}

function reviewAll()
{
    for(var i = 0; i < localStorage.length; i++)
    {
        var key = localStorage.key(i);
        var value = localStorage[key];
        data.innerHTML += '<div>' + key + ': ' + value + '<br></div>';

    }
}


addEventListener("load", initiate);

index.html

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="mystyles.css" />
        <script src="script.js"></script>
        <title>Demo HTML5</title>
    </head>
    <body>
        <section id="formSection">
            <form name="dataForm">
                <label for="key">Key: </label><br />
                <input type="text" id="key" name="key" /> <br />
                 <label for="value">Value: </label><br />
                <textarea name="value" id="value"></textarea><br />
                 <input type="button" id="save" value="Save" />
                <input type="button" id="retrieve" value="Retrieve" /> 
                <input type="button" id="delete" value="Delete" />
                 <input type="button" id="review" value="Review" />             
            </form>
        </section>
        <section id="data">
            No data
        </section>
    </body>
</html>

2
首先,您必须检查您的浏览器是否支持本地存储 if (typeof(Storage) != "undefined") { // 存储 localStorage.setItem("varname","data" ); } else { alert ("对不起,您的浏览器不支持Web存储..."); } - Farshad
@Farshad 是的。它支持存储。实际上它会存储它,直到浏览器关闭。 - robue-a7119895
如果您希望在页面关闭后仍保留某些数值,您可以使用 cookie。 - Farshad
@Farshad 我认为使用本地存储可以实现这一点,而无需使用 cookie。 - robue-a7119895
我刚在FF 31中进行了检查 - 输入了Key =“123”,Value =“456”,然后按下保存。然后我在jsfiddle菜单上按下“运行”以重置值,在Key字段中输入“123”并按“检索”->在Value文本框下出现了“123:456”。 - Ilya Luzyanin
显示剩余12条评论
1个回答

1
如果您正在使用隐私模式浏览器,关闭浏览器时它会清除所有localStorage数据。

不,我没有开启隐私模式。虽然我认为本地存储功能不太可靠。 - robue-a7119895

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接