CODEWITHSUNDEEP
javascripthtml
robue-a7119895
robue-a7119895

Reputation: 816

HTML5 local storage not storing correctly

I don't know if I have understood the right context of 'storage', but according to some tutorials I used the following Javascript code, to enable a page to locally store (no session) submitted data, but when I close the page and reopen the page, the content do not appear.

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>

Upvotes: 3

Views: 256

Answers (1)

Jonnefoy
Jonnefoy

Reputation: 86

If you are using the browser in privacy mode, it will clear all localStorage data when you close it.

Upvotes: 1

Related Questions