javascript - HTML5本地存储无法正确存储 - Thinbug

HTML5本地存储无法正确存储

时间：2014-08-17 11:47:25

标签： javascript html html5

我不知道我是否理解了“存储”的正确背景，但根据一些教程，我使用了以下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>

1 个答案:

答案 0 :(得分：1)

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