为什么我的 localStorage 输入不能在我的个人计算机上跨页面持久保存？

发布于 2024-10-06 14:18:27 字数 1661 浏览 1 评论 0原文

我正在尝试 HTML5 localStorage 方法来保存数据。据我了解，localStorage 应该在同一域内的页面之间持久存在。如果我错了，请纠正我。

但是，由于某种原因，我的 localStorage 值似乎没有在计算机上同一目录中的页面之间保留。在这种情况下，它不被视为同一个域吗？我有点失落。

以下是相关两个文档的代码：

文档 1（假设 jQuery 已包含在文档的其他位置）

<script type="text/javascript">
$(document).ready(function() {
    $("form#settings").submit(function(event) {
        event.preventDefault();
        localStorage["display"] = $("input[name='display']:checked").val();;
        localStorage["message"] = $("#disp_message").val();
    });
});
</script>
<form id="settings">
    <h1>Display</h1>
    <input type="radio" name="display" id="message" value="message" />
    <label for="message">Replace with message:</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" id="disp_message" size="60" value="Test content." /><br />
    <input type="radio" name="display" id="hide" value="hide" />
    <label for="hide">Hide entries</label>
    <br />
    <br />
    <input type="submit" />
</form>

文档 2

<html><body>
    <script>
    document.write(localStorage["message"]);
    document.write("<br />");
    document.write(localStorage["message"]);
    </script>
</body></html>

只是为了澄清一下代码，其想法是基本上是为了稍后将其用于 Google Chrome 扩展程序，以根据某些标准隐藏某些内容。文档 1 将作为选项页面的基础，文档 2 将作为实际扩展脚本的基础。但这与我的问题无关。

作为最后的澄清，我已经尝试了存储和访问 localStorage 变量的所有三种方法，即： localStorage["键"] = "值"; localStorage.key = "值"; localStorage.setItem("键", "值");

有什么想法吗？

原文

I'm trying out the HTML5 localStorage method for saving data. As I understand it, localStorage should be persistent between pages within the same domain. Please correct me if I'm wrong.

However, for some reason, it appears my localStorage values aren't persisting between pages in the same directory on my computer. Is it not considered the same domain in this case? I'm a little lost.

Here's the code for the two documents in question:

Document 1 (assuming jQuery has been included elsewhere in the document)

<script type="text/javascript">
$(document).ready(function() {
    $("form#settings").submit(function(event) {
        event.preventDefault();
        localStorage["display"] = $("input[name='display']:checked").val();;
        localStorage["message"] = $("#disp_message").val();
    });
});
</script>
<form id="settings">
    <h1>Display</h1>
    <input type="radio" name="display" id="message" value="message" />
    <label for="message">Replace with message:</label>    
    <input type="text" id="disp_message" size="60" value="Test content." /><br />
    <input type="radio" name="display" id="hide" value="hide" />
    <label for="hide">Hide entries</label>
    <br />
    <br />
    <input type="submit" />
</form>

Document 2

<html><body>
    <script>
    document.write(localStorage["message"]);
    document.write("<br />");
    document.write(localStorage["message"]);
    </script>
</body></html>

Just to clarify the code a touch, the idea is basically to later use this for a Google Chrome extension to hide certain content based on certain criteria. Document 1 would serve as the basis for the Options page, and Document 2 would be the basis for the actual extension script. But that's irrelevant for my question.

As a final clarification, I have tried all three ways of storing and accessing the localStorage variable, i.e.:
localStorage["key"] = "value";
localStorage.key = "value";
localStorage.setItem("key", "value");

Any ideas at all?

分享到QQ

分享到微博