Issues using localStorage to pass form data between HTML Pages

Question

I have been trying to input values in the form and click the submit button to go to the new tip.html page, then use the console to view localstorage but I get this error when I type localStorage in the console of the tip.html page:

VM223:1 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. at :1:1

How can I send my form data from the home.html page to the tip.html page?

What is wrong here? Or is there an easier way of doing what I want to get done?

Files:

The bottom of this page has my form : https://github.com/ScarletMcLearn/UniThings/blob/master/CSC%20-%20Web/Assignment%201/src/home.html

(This form: https://hastebin.com/ogikekaxal.xml )

This page has the webpage that the form submit action takes to : https://github.com/ScarletMcLearn/UniThings/blob/master/CSC%20-%20Web/Assignment%201/src/tip.html

(This HTML page : https://hastebin.com/dotejuperi.xml )

And this final file is my Jquery File which has the function dealing with the submit button :

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

(Submit Button Function : https://hastebin.com/sisugehede.http )

Here is the entire repository : https://github.com/ScarletMcLearn/UniThings/tree/master/CSC%20-%20Web/Assignment%201

Thank you for your time.

Answer 1

Essentially, you are trying to load your script from a different domain than the html page is loaded from, I think. You should load them both from the same domain. This setting is intentionally set to off in chrome and I would not recommend disabling it.

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

This exception is thrown when the "Block third-party cookies and site data" checkbox is set in Content Settings.

To find the setting, open Chrome settings, type "third" in the search box, click the Content Settings button, and view the fourth item under Cookies.

If this setting is checked, third-party scripts cookies are disallowed and access to localStorage may result in thrown SecurityError exceptions.

Source

Answer 2

• You could use javascript to load the html dynamically (for example with jQary without changing the url by clicking) and save your data in a global variable.
• Or you can pass the data in the url (after ?) as param or hash and than read from the other page