Javascript sessionStorage 变量未正确保存答案

【问题标题】：Javascript sessionStorage variable not saving correctlyJavascript sessionStorage 变量未正确保存
【发布时间】：2016-08-19 21:23:34
【问题描述】：

我正在尝试将 HTML 表单中的各种值保存到 sessionStorage，但使用以下代码我收到“storeInfo Start”警报但没有收到“StoreInfo End”，因此我认为 sessionStorage 代码存在一些错误/错误。

我已经删除了其他代码，但这个示例仍然不适合我，我正在使用 Firefox 45.0.2，如果相关的话，但是我之前在这个浏览器中使用过 sessionStorage 和类似的代码，但我找不到差异/s之间。

function validate () {
    alert("Validate");
    storeInfo();
}

function storeInfo() {
    alert("storeInfo Start");

    sessionStorage.firstName = document.getElementById("firstName").value;

    alert("StoreInfo End - First Name is: " + sessionStorage.firstName);

}

function init () {
    alert("Init Works!");

    // For apply page
    if (document.getElementById("applyForm") != null) {
        var applyForm = document.getElementById("applyForm");
        applyForm.onsubmit = validate;
    }
 }

window.onload = init;

来自 HTML 文件：

<form id="applyForm">
    <p>
        <label for="firstName">First Name</label> 
        <input type="text" name="firstName" id="firstName" pattern="^[a-zA-Z]+$" maxlength="25" size="25" required="required" value="ThisIsMyName" />
    </p>
    <input type="submit" />
</form>

【问题讨论】：

sessionStorage 是这样工作的，错误应该在其他地方
document.getElementById("firstName") 必须返回 null 否则您会看到第二个警报
您检查过您的控制台吗？如果您的表单操作针对不同的域，则可能是同源策略。您应该在控制台中看到类似的内容。 > 未捕获的安全错误：无法读取“sessionStorage”属性 > 从“窗口”：文档已被沙盒化并且缺少 >“允许同源”标志。
非常感谢，我没有意识到有一个错误“操作不安全”实际上阻止了保存数据，因为我一直在本地工作，但是在服务器上使用了 echo 脚本.当我将此代码上传到同一个域时，它又可以正常工作了。感谢您的所有回复

标签： javascript forms sessionstorage

【解决方案1】：

我必须在 sn-p 中添加一些 html，但是当我把它放在 fiddle 上时它可以工作。

<form id="applyForm">
    <p>
        <label for="firstName">First Name</label> 
        <input type="text" name="firstName" id="firstName" pattern="^[a-zA-Z]+$" maxlength="25" size="25" required="required" value="ThisIsMyName" />
    </p>
    <input type="submit" />
</form>

这个fiddle 有效

【讨论】：

抱歉，我忘记了其他 HTML 标记对复制也很重要。我不确定有什么区别，但我仍然无法让它像这样工作
即使你的电脑上有小提琴的原始副本？
是的，即使只在它自己的带有<html> 等标签的 HTML 文件中使用此表单，我也无法获得第二个“StoreInfo End...”
我在 Firefox chrmoe 甚至 IE 上测试了我的小提琴，它总是有效。我不知道如何帮助你。对不起

【解决方案2】：

也许你可以试试localStorage，像这样：

if(localStorage.getItem('firstName')){
        firstName=localStorage.getItem('firstName');
    } 
localStorage.setItem('firstName',document.getElementById("firstName").value;);

【讨论】：

谢谢，我已经尝试使用 localStorage，但我仍然遇到同样的问题，但我更愿意为这个特定的应用程序使用 sessionStorage，这样它就不会在会话之间保存。

【解决方案3】：

你在哪里找到这样的 API？

用途：

sessionStorage.setItem('firstName', document.getElementById("firstName").value;);

...后来sessionStorage.getItem('firstName');

【讨论】：

我在 uni 的演讲幻灯片中被证明使用该格式，尽管这似乎是一种更好的方法，但当我使用它时，我仍然遇到同样的问题。
imho sessionStorage 是一个对象，而不是 API。为什么要使用我们不在任何其他对象上使用的有条理的访问（带引号、11 个额外字符和括号平衡）？使用描述性名称可以防止在少数“保留”键上发生冲突，并且总是使用这些方法的编码人员通常没有意识到 JSON.stringify(sessionStorage) 和 Object.keys(sessionStorage) 工作得很好，并称赞 Object.assign() 合并批次。但我离题了..