localStorage在页面刷新后不检索值 [英] localStorage doesn't retrieve values after page refresh
问题描述
我试图测试html5 localStorage功能。出于某种原因，每当我尝试在刷新页面后从存储中检索值时，我只会返回空值。 （如果我尝试在我设置它们的同一个函数中检索值，那么我可以正确地检索它们。）
I'm trying to test out html5 localStorage feature. For some reason, whenever I try to retrieve a value from storage after refreshing the page, I only get null values returned. (If I try retrieving the values in the same function that I set them in, then I can properly retrieve them).
一件事：我的html / javascript正在从本地磁盘请求加载（例如，我使用字符串：file：/// C：/testLocalStore.html来浏览到该文件，而不是请求它从Web服务器。这会导致我看到的localStore问题？
One thing: the html/javascript that I'm loading is being requested from the local disk (for example, I'm using the string: "file:///C:/testLocalStore.html" to browse to the file, instead of requesting it from a web server. Would this cause the localStore problems that I'm seeing?
（我想发布完整的代码示例，但我有一些格式问题。我会很快发布。）
(I'd like to post the full code example, but I'm having some problems with the formatting. I'll post it shortly).
<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>
推荐答案
是的，在本地加载文件意味着它没有'没有起源。由于localStorage使用同源策略来确定对存储数据的访问，因此未定义当您将其与本地文件一起使用时会发生什么，并且可能不会持久存在。
Yes, loading the file locally means that it doesn't have an origin. Since localStorage is uses the same-origin policy to determine access to stored data, it is undefined what happens when you use it with local files, and likely that it won't be persisted.
您需要在Web服务器上托管您的文件才能拥有正确的来源;您可以在本地运行Apache或任何其他服务器，并通过 localhost 访问它。
You will need to host your file on a web server in order to have a proper origin; you can just run Apache or any other server locally and access it via localhost.
这篇关于localStorage在页面刷新后不检索值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
