使用 localStorage 在 HTML 页面之间传递表单数据的问题答案

【问题标题】：Issues using localStorage to pass form data between HTML Pages使用 localStorage 在 HTML 页面之间传递表单数据的问题
【发布时间】：2020-11-12 16:16:20
【问题描述】：

我一直在尝试在表单中输入值并单击提交按钮以转到新的 tip.html 页面，然后使用控制台查看 localstorage 但是当我在提示的控制台中键入 localStorage 时出现此错误.html 页面：

VM223:1 未捕获的 DOMException：无法读取“localStorage” 来自“窗口”的属性：拒绝访问此文档。在 :1:1

如何将表单数据从 home.html 页面发送到 tip.html 页面？

这里有什么问题？或者有没有更简单的方法来做我想做的事情？

文件：

这个页面的底部有我的表格： https://github.com/ScarletMcLearn/UniThings/blob/master/CSC%20-%20Web/Assignment%201/src/home.html

（此表格：https://hastebin.com/ogikekaxal.xml）

此页面包含表单提交操作所执行的网页： https://github.com/ScarletMcLearn/UniThings/blob/master/CSC%20-%20Web/Assignment%201/src/tip.html

（此 HTML 页面：https://hastebin.com/dotejuperi.xml）

这个最终文件是我的 Jquery 文件，它具有处理提交按钮的功能：

https://github.com/ScarletMcLearn/UniThings/blob/master/CSC%20-%20Web/Assignment%201/src/script.js

（提交按钮功能：https://hastebin.com/sisugehede.http）

这是整个存储库：https://github.com/ScarletMcLearn/UniThings/tree/master/CSC%20-%20Web/Assignment%201

感谢您的宝贵时间。

【问题讨论】：

标签： javascript html forms local-storage frontend

【解决方案1】：

我认为，基本上，您正在尝试从与加载 html 页面不同的域加载脚本。您应该从同一个域加载它们。此设置在 chrome 中被有意设置为关闭，我不建议禁用它。

未捕获的安全错误：无法从“Window”读取“localStorage”属性：拒绝访问此文档。

在内容设置中设置了“阻止第三方 cookie 和站点数据”复选框时会引发此异常。

要找到设置，请打开 Chrome 设置，在搜索框中输入“第三项”，单击“内容设置”按钮，然后查看 Cookies 下的第四项。

如果选中此设置，第三方脚本 cookie 将被禁止，并且访问 localStorage 可能会导致抛出 SecurityError 异常。

Source

【讨论】：

可能值得添加一个说明，说明为什么要设置此安全设置，以及为什么在浏览器中禁用此设置时应该非常小心。

【解决方案2】：

您可以使用 javascript 来动态加载 html（例如使用 jQary 而无需通过单击更改 url）并将您的数据保存在全局变量中。
或者您可以将 url 中的数据（在 ? 之后）作为参数或哈希值传递，而不是从其他页面读取

【讨论】：