localStorage updates between pages; works in FF 39

2020-06-27 03:58发布

问题:

I've created an offline site consisting of 2 .html pages and 1 underlying .js page with the necessary functions (both html pages reference this js page):

1) edit.html is where an array of values is entered by the user in a simple html form and, upon Submit, stored in a JSON stringify-d localStorage variable ("personList"). The script then does window.location.href = "main.html"; which loads the other page.

2) main.html , in the body onload event, runs a function that first retrieves the localStorage variable "personList". If "personList" is undefined, it redirects the user back to edit.html to enter values; otherwise it does a JSON parse on "personList" to get it back into an array, populates several areas of the main.html page with the values.

This works fine in FF 39, Chrome 44, and Safari 8; on initial load of the main.html page, the values match what was entered in edit.html.

Here's where the problem occurs:

main.html has a link to allow the user to edit the list; the link simply does a window.location.href = "edit.html" to take the user back to that page. edit.html populates the form with the values from localStorage variable "personList", and the user can then update these values and hit Submit again (which then takes the user back to main.html).

  • In FF 39, main.html displays the updated values from "personList" as expected
    • In Chrome 44, main.html displays the updated values from "personList" as expected
  • In Safari 8, main.html displays the pre-update values of "personList".

A check of the localStorage variable contents in Safari developer tools confirms that while edit.html value of "personList" is updated, main.html value appears to be cached (as it still contains the old content).

If I close the Safari window and then open a new window, it pulls the updated values of "personList", but I obviously don't want the user to have to close and reopen the browser. The function called in the onLoad event (that loads the values into main.html) is definitely being triggered both on initial load and when it comes from edit.html.

I've googled and searched stack and not finding this scenario - any ideas?