LocalStorage Mobile Issue Fix
DESIGN YOURDREAM BATHROOM
with Emma Butler of White Meadow Interiors
Join us at our Sandyford Showroom for an exclusive in-store event featuring 1-on-1 design consultations with Emma Butler and a live Bathroom Design Q&A session.
Saturday 24th May, 9am – 5pm
House of Tiles Sandyford
Apply for your 1-on-1 design consultation
<style>
#popup-overlay {
display: none; /* hidden initially */
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
justify-content: center;
align-items: center;
overflow-y: auto;
padding: 20px;
}
.popup {
background: #fff;
width: 485px;
max-width: 90%;
max-height: 95vh; /* Important: limits height on any screen */
overflow-y: auto;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
position: relative;
animation: fadeIn 0.4s ease;
margin: auto;
border-radius: 10px;
}
.popup-content-over-image {
background: #fff url(/wp-content/uploads/2025/05/pop-up-bg.png) no-repeat;
background-size: cover;
height: 600px;
display: flex
;
flex-direction: column;
justify-content: space-between;
padding: 20px 40px 30px 40px;
background-position: 20% 55%;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.close-btn {
position: absolute;
top: 5px;
right: 8px;
color: #fff;
font-weight: 700;
background: transparent;
border: none;
font-size: 45px;
cursor: pointer;
}
.popup-header {
display: flex
;
justify-content: space-between;
align-items: center;
padding: 30px;
background: #d8dedc;
}
.logo-left
{
height: 40px;
}
.logo-right { height: 90px;}
.popup-content {
text-align: center;
}
.popup-heading{
background-color:#1b313e;
padding:10px;
}
.popup-heading h2 {
color: #fff;
margin-bottom: 0px;
}
.subtext {
color: #c30072;
font-weight: bold;
margin: 10px 0;
}
.info {
color: #858585;
}
.event-details {
display: flex
;
flex-direction: column;
gap: 5px;
font-size: 15px;
color: #333;
margin-top: 12px;
align-items: center;
}
.event-row {
display: flex
;
align-items: center;
gap: 10px;
font-size: 18px;
justify-content: center;
}
.event-icon {
width: 20px;
height: 20px;
object-fit: contain;
}
.cta-button {
display: block;
background: #c30072;
color: white;
padding: 12px 24px;
text-decoration: none;
font-weight: bold;
border-radius: 10px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease;
font-size: 20px;
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.7);
}
.cta-button:hover {
background: #a1005d;
}
#popup-overlay {
display: none; /* hide initially */
}
@media (max-width: 767px) {
.popup {
max-height: 90vh;
overflow-y: auto;
width: 100%;
}
.popup-header {
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
}
.logo-left {
height: 30px;
}
.logo-right {
height: 75px;
}
.popup-heading h2 {
font-size: 20px;
line-height: 1.2;
}
.popup-content-over-image {
padding: 20px;
height: 550px;
background-position: center;
}
.event-row {
font-size: 14px;
justify-content: flex-start;
}
.cta-button {
font-size: 18px;
padding: 10px 20px;
}
}
</style><script>
document.addEventListener("DOMContentLoaded", function () {
const popup = document.getElementById("popup-overlay");
const closeBtn = document.querySelector(".close-btn");
// Check if popup has already been shown
const hasSeenPopup = window.localStorage.getItem("popupShown");
if (!hasSeenPopup && popup) {
// Show it once and immediately mark it as shown
popup.style.display = "flex";
window.localStorage.setItem("popupShown", "true");
}
// Close popup if user clicks the X
if (popup && closeBtn) {
closeBtn.addEventListener("click", () => {
popup.style.display = "none";
});
}
});
</script>on mobile sessionStorgae work but localstorgae not work
—
### ✅ 1. **Private/Incognito Mode Blocks `localStorage`**
Some mobile browsers (especially Safari on iOS and some Android variants) block `localStorage` in private browsing mode. In these cases:
– `localStorage.setItem()` might throw an error or silently fail.
– `sessionStorage` usually still works.
### ✅ 2. **Try/Catch for Safer Access**
Wrap your `localStorage` access in a `try/catch` block to catch silent failures:
document.addEventListener("DOMContentLoaded", function () {
const popup = document.getElementById("popup-overlay");
const closeBtn = document.querySelector(".close-btn");
let hasSeenPopup = false;
try {
hasSeenPopup = localStorage.getItem("popupShown");
} catch (e) {
console.warn("localStorage access failed:", e);
}
if (!hasSeenPopup && popup) {
popup.style.display = "flex";
try {
localStorage.setItem("popupShown", "true");
} catch (e) {
console.warn("localStorage set failed:", e);
}
}
if (popup && closeBtn) {
closeBtn.addEventListener("click", () => {
popup.style.display = "none";
});
}
});—
### ✅ 3. **Fallback to `sessionStorage`**
You can implement a fallback like this:
let storage;
try {
localStorage.setItem("test", "1");
localStorage.removeItem("test");
storage = localStorage;
} catch (e) {
storage = sessionStorage;
}
const hasSeenPopup = storage.getItem("popupShown");
if (!hasSeenPopup && popup) {
popup.style.display = "flex";
storage.setItem("popupShown", "true");
}—
### ✅ 4. **Test on Real Devices**
Test both in:
– Chrome/Safari **Incognito** and **Normal Mode**
– Real iOS and Android devices
—
### ✅ 5. **Debug via DevTools (Remote)**
Use **Chrome DevTools > Remote Devices** or **Safari Web Inspector** on iOS to inspect `localStorage`.
—
Let me know if you want to force popup to show **on every visit** or reset `localStorage` manually for testing.