繁体   English   中英

HTML5本地存储无法正确存储

[英]HTML5 local storage not storing correctly

我不知道我是否理解了'存储'的正确上下文,但根据一些教程,我使用了以下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>

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM