Javascript HTML5本地存储未正确存储_Javascript_Html

Javascript HTML5本地存储未正确存储

javascript html

Javascript HTML5本地存储未正确存储,javascript,html,Javascript,Html,我不知道我是否理解了“存储”的正确上下文，但根据一些教程，我使用了以下Javascript代码，使页面能够本地存储（无会话）提交的数据，但当我关闭页面并重新打开页面时，内容不会出现 script.js 函数启动（） { var saveButton=document.getElementById（'save'）； var retrieveButton=document.getElementById（'retrieve'）； var deleteButton=document.getElement

我不知道我是否理解了“存储”的正确上下文，但根据一些教程，我使用了以下Javascript代码，使页面能够本地存储（无会话）提交的数据，但当我关闭页面并重新打开页面时，内容不会出现

script.js

函数启动（）
{
var saveButton=document.getElementById（'save'）；
var retrieveButton=document.getElementById（'retrieve'）；
var deleteButton=document.getElementById（'delete'）；
var reviewButton=document.getElementById（'review'）；
saveButton.addEventListener（'单击'，saveItem）；
retrieveButton.addEventListener（'单击'，retrieveItem）；
deleteButton.addEventListener（'单击'，删除项）；
reviewButton.addEventListener（'click'，ReviewWall'）；
}
函数saveItem（）
{
var key=document.getElementById（'key'）。值；
var value=document.getElementById（'value'）.value；
localStorage[键]=值；
}
函数retrieveItem（）
{
var data=document.getElementById（'data'）；
var key=document.getElementById（'key'）。值；
var值=本地存储[key]；
data.innerHTML=''+key+'：''+value+''；
}
函数deleteItem（）
{
如果（确认（'删除？'））
{
var key=document.getElementById（'key'）。值；
localStorage.removietem（键）；
data.innerHTML=“已删除”；
}    
}
函数reviewAll（）
{
for（var i=0；i'；
}
}
addEventListener（“加载”，启动）；

index.html


演示HTML5
键：



值：



没有数据

如果您在隐私模式下使用浏览器，它将在您关闭浏览器时清除所有本地存储数据。

首先，您必须检查您的浏览器是否支持本地存储

If（typeof（Storage）！=“undefined”）{//Store localStorage.setItem（“varname”，“data”）；}else{alert（“抱歉，您的浏览器不支持Web存储…”）}

@Farshad是的。它确实支持存储。它实际上会存储该值，直到浏览器关闭。如果您希望在页面关闭操作之后仍保留该值。你可以用cookies@Farshad我认为本地存储可以实现这一点，而无需使用cookies。是的，HTML5中添加了此功能。我找到了这篇使用html5 localstorage的文章和代码示例。没有。我没有使用隐私模式。但我认为这种本地存储功能并不可靠

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);

<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>