使用localStorage在HTML页面之间传递表单数据时出现的问题

时间:2018-10-29 15:21:36

标签: javascript html forms local-storage frontend

我一直在尝试在表单中输入值,然后单击“提交”按钮转到新的tip.html页面,然后使用控制台查看本地存储,但是当我在提示的控制台中键入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 File,它具有处理Submit按钮的功能:

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

谢谢您的时间。

2 个答案:

答案 0 :(得分:0)

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

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

  

在“内容设置”中设置“阻止第三方Cookie和网站数据”复选框时,将引发此异常。

     

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

     

如果选中此设置,则不允许第三方脚本cookie,并且对localStorage的访问可能会导致引发SecurityError异常。

Source

答案 1 :(得分:0)

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