localStorage não recupera valores após a atualização da página

Question

Sep 17, 2010, 08:43 PM

localStorage não recupera valores após a atualização da página

Estou tentando testar o recurso localStorage do html5. Por alguma razão, sempre que tento recuperar um valor do armazenamentodepois de atualizando a página, eu recebo apenas valores nulos retornados. (Se eu tentar recuperar os valores na mesma função em que os defino, posso recuperá-los adequadamente).

Uma coisa: o html / javascript que estou carregando está sendo solicitado no disco local (por exemplo, estou usando a string:"arquivo: /// C: /testLocalStore.html" para procurar o arquivo, em vez de solicitá-lo em um servidor da web. Isso causaria os problemas localStore que estou vendo?

(Gostaria de postar o exemplo de código completo, mas estou tendo alguns problemas com a formatação. Vou publicá-lo em breve).

<html> <head> <title>test local storage</title>
<base href="http://docs.jquery.com" />
<script src="http://code.jquery.com/jquery-1.3.js"></script>
<script type="text/javascript">

function savestuff()
    {
        var existingData = localStorage.getItem("existingData");
        if( existingData === undefined || existingData === null )
        {
            // first time saving a map.
            existingData = $("#mapName").val();
        }
        else
        {
            existingData = existingData + "," + $("#mapName").val();
        }

    localStorage.setItem("existingData", existingData);
    // test is non-null here, it was properly retrieved.
    var test = localStorage.getItem("existingData");
}

$(document).ready( function init()
{
    // existing data is always null. 
    var existingData = localStorage.getItem("existingData");
    if( existingData !== null )
    {
        var existingDataListHtml = existingData.split(",");
        existingDataListHtml = $.each(existingData, function(data) {
                return "<li>" + data + "<\/li>";
            });

        $("#existingData").html("<ul>" + existingDataListHtml + "<\/ul>");
    }
} );
</script> 
</head> <body> 
        <form id="loadFromUser" onsubmit="savestuff();">
            <input id="mapName" type="text">
            <input type="submit" value="save">
        </form>
    <div id="existingData"> </div>
</body> </html>