Ongoing issue: iOS Safari failing to trigger storage events

Two tabs are open in iOS Safari, both directed to the same page. Each tab has an event listener for the storage event on the window object, and localstorage is updated when the client interacts by clicking/tapping/typing.

In Internet Explorer, the inactive tab receives storage events while this isn't happening in Safari (for Firefox and Chromium browsers, I utilize the Broadcast Channel API instead). Interestingly, this code previously worked on Safari (although I don't recall which version).

I have ensured that there are no JavaScript errors on the page and that I am not in private browsing mode. Any ideas why storage events would suddenly cease to fire?

javascriptlocal-storagemobile-safari

Answer №1

Initially, I believed this issue was related to Tracking Prevention (especially when dealing with a page and an iframe on a third-party site), but now it seems like it may actually be a bug in Safari.

If you're looking to communicate across tabs in Safari, consider using a Service Worker. Here are some recommended methods for cross-tab communication, from most preferable to least:

  1. Utilize a BroadcastChannel if available, as it's specifically designed for this purpose.
  2. Opt for message events within a Service Worker. While slightly better supported than BroadcastChannel, keep in mind that waking up a Service Worker regularly isn't ideal. Additionally, note that Service Workers don't function in Firefox Private Browsing mode, which is why Firefox supports BroadcastChannel.
  3. Consider using storage events as a fallback option. This method is compatible with Internet Explorer, although it's advisable not to rely on it unless IE support is necessary. Be aware that Safari Private Browsing mode may prevent this from working properly due to localStorage errors. Moreover, there's a bug in IE where the storage event's newValue property displays the oldValue, necessitating the deletion of the localStorage value after setting it to trigger the correct value.

It's important to recognize that none of these approaches facilitate communication between a first-party and third-party context in Safari.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the Art of Accelerating getJSON Array Data

Currently, I am facing a challenge with retrieving a large array (4MB) of data from the server side. I have been utilizing the jQuery getJSON method to obtain the array data and display it on the browser. However, this process has proven to be quite slow ...

javascriptajaxarraysjson

Troubleshooting Cross-Origin Resource Sharing Errors in JavaScript's XMLHttpRequest()

When making a preflight request, ensure that the 'Access-Control-Allow-Origin' header in the response does not use '*' as the value when the request's credentials mode is set to 'include'. This will prevent Origin '& ...

javascriptajaxxmlhttprequest

Utilize an image in place of text (script type="text/javascript")

The vendor has provided me with some code: <a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">FREE Puppies</a> <script type="text/javascript" src="htt ...

javascriptwordpressimagewidget

Tips for measuring the number of elements in a table using Angular

Need assistance with code for an Angular app that uses ngFor to populate a datatable. The goal is to count the number of columns with the name "apple" and display the total on a card named 'apples'. I attempted to create a function like this: ...

javascriptangulartypescript

A ReactJS Error occurred: {error: 400, reason: "Failed match", message: "Failed match [400]", errorType: "Meteor.Error"}

I encountered an issue while attempting to send form data to the server when clicking on the Next Button in a Wizard Form. The error that occurs is related to an "Undefined User" warning displayed in the Console during Step 1 of the form submission: " { ...

javascriptreactjsmongodbmeteorredux

Encountering an error when attempting to render the ApolloProvider component separately using ReactDOM

I have set up the ApolloProvider in my React application's index.js file. It is successfully connecting to the Apollo server. import { React } from 'react'; import * as ReactDOM from 'react-dom/client'; import { ApolloClient, InMem ...

javascriptreactjsgraphqlapollo-client

Issue encountered during rendering: The function used is not a filter

Everything works fine with the search filter and pagination on the initial load. However, upon clicking to go to the next page, an error occurs stating **'Error in render: "TypeError: this.tickets.filter is not a function"'**. This issue can b ...

javascriptvue.jsvuejs2

No content in webpack result file when using express and react

Trying to implement webpack into the basic react comment list tutorial has been a bit of a challenge for me. Everything seems to be functioning properly, but my output file never actually contains any content. Let's take a look at my webpack configur ...

javascriptexpressreactjswebpack

Set Sprite Canvas Material to match the color of a different element

Can someone please guide me on changing the color of the Sprite Canvas Material? var material = new THREE.SpriteCanvasMaterial( { color: 0xffffff, I am trying to make it match the color of another element based on a specific ID or class. However, I' ...

javascriptcssthree.js

The data returned by axios is not equivalent to the parsed JSON response from the request

When making an axios request, I use the following code: const response = await axios({ url, method, headers: headersObject, data, params: params || {}, }); After making the request, I examine the response: console.log('response.request.resp ...

javascriptjsonaxios

Displaying content using asynchronous JavaScript and XML (AJAX

I'm currently working on implementing an infinite scroll feature, where more content is loaded as the user reaches the bottom of the page. I am making an ajax call and attempting to render a new view on the backend before sending it back to the fronte ...

javascriptnode.jsexpress

Deploying a node add-on to a server bypassing the use of localhost

Currently, I have developed a node application that runs successfully on my local server. The project consists of an index.html file located in a public directory, along with the main app.js file. By executing the command node app.js in the terminal, the a ...

javascriptnode.jsexpress

Incorporating new functionality into the current .js file to automatically collapse the navbar when clicking outside

Previously, I utilized .js for my sticky navbar in Bootstrap 4.1.3 and it worked perfectly. However, I attempted to add a function in the script to collapse the navbar on mobile devices when clicking outside the menu, but it wasn't successful. Here i ...

javascriptbootstrap-4navbar

When it comes to mapping routes in the express framework of Node.js

Currently, I am facing an issue while setting up the route in my app.js file. The route for the listing of flights is passed in the routes/flights.js file. When I define the route at the bottom of all routes, it results in a 404 error. However, if I place ...

javascriptnode.jsexpress

Troubleshooting Azure SDK: Tips for Displaying the Appropriate REST API

Currently, I am utilizing the Azure JS SDK to interact with Postgres in Azure using various modules such as @azure/arm-postgresql, @azure/identity, and @azure/functions. My main goal is to access the underlying REST Api for debugging purposes. For instanc ...

javascriptazuresdkazure-sdk-js

Trigger an alert box using JavaScript after a successful submission

PHP Script Explanation The following PHP script is executed once the corresponding form has been filled out: <?php $connect = mysql_connect($h, $u, $p) or die ("Connection Failed."); mysql_select_db($db); ## Prevent SQL Inje ...

phpjavascript

Encountering difficulties when serving assets in Express.js?

I am working with a file structure that looks like this: - server.js - controllers - [...] - public - utils - views - home - index.html - js - index.js - css - index.css When my application starts, I include ...

javascriptnode.jsexpress

showing information from a table column

Utilizing the jQuery DataTables plugin with a JSF <h:dataTable>. The page contains 86 records. +++++++++++++++++++++++++++++++++++++ + SN. + Name + Email + +++++++++++++++++++++++++++++++++++++ + 1 + Name 1 + Email 1 + + ...

javascriptjqueryhtmljsf-2datatables

Tips for successfully incorporating PHP dynamic parameters separated by commas into a JavaScript onclick function

How can I pass PHP dynamic parameters separated by commas to a JavaScript onclick function? Can someone assist me with the correct solution? The code below is not working as expected. echo "<td><a href='#' onclick='editUser(". $row ...

javascriptphpjquery

Retrieve the value of a variable by referencing the variable name as a string in JavaScript

If I have: var red = ["#F33121", "#F06562", "#90A4AE"]; //my array called red. var blue = ["#345678", "#234423", "#435223"]; //my array called blue. var color = $('.element').text(); // = red Therefore, when console.log(color); is called, it re ...

javascriptjqueryarrays