Hello,
I’m using this simple code at the end of my post to store post IDs and some of their HTML on Local Storage so that then I can display those information on another page. All works fine when a user is logged in but as soon as they log out, saving to local storage becomes impossible. I’m hosting my website on WP Engine and Raidboxes (testing both) for this test and I know they might have sessions disabled on the server. Does anybody know a workaround to make this work?
I know the correct method would be to store those info in the database, but I don’t need to build anything too complex and overall the info should only be available for the people who saves them.
Thank you very much!
`if (typeof (localStorage) === ‘undefined’) {`
`document.getElementById(‘result’).innerHTML =`
`’Your browser does not support HTML5 localStorage. Try upgrading.’`
`} else {`
`console.log(localStorage)`
`$(‘.post-inner’).each(function (i, el) {`
`const itemData = JSON.parse(localStorage.getItem(el.id))`
`if (itemData && itemData.addfave) {`
`$(this).closest(‘.post-event’).addClass(‘addfave’)`
`}`
`})`
`}`
`window.addEventListener(‘load’, () => {`
`// Function to add or remove a favorite item`
`function toggleFavorite (event) {`
`event.preventDefault()`
`const clickedItem = event.target.closest(‘.post-inner’)`
`const index = clickedItem.id`
`const closestEvent = clickedItem.closest(‘.post-event’)`
`// Toggle the ‘addfave’ class on the element`
`closestEvent.classList.toggle(‘addfave’)`
`// Check if ‘addfave’ is true (item is being added to favorites)`
`if (closestEvent.classList.contains(‘addfave’)) {`
`// Store both the ID and HTML structure as JSON in local storage`
`const itemData = {`
`addfave: true,`
`html: clickedItem.innerHTML`
`}`
`localStorage.setItem(index, JSON.stringify(itemData))`
`} else {`
`// ‘addfave’ is false, remove the item from local storage`
`localStorage.removeItem(index)`
`}`
`}`
`// Add click event listeners to all elements with the class ‘post-inner’`
`const postInnerElements = document.querySelectorAll(‘.post-inner’)`
`postInnerElements.forEach(function (postInnerElement) {`
`postInnerElement.addEventListener(‘click’, toggleFavorite)`
`})`
`// Retrieve saved events from local storage`
`const savedEvents = Object.keys(localStorage).map(function (key) {`
`return {`
`id: key,`
`data: JSON.parse(localStorage.getItem(key))`
`}`
`})`
`const savedEventsContainer = document.getElementById(‘savedEventsContainer’)`
`savedEvents.forEach(function (event) {`
`const eventHTML = event.data.html`
`// Create a <div> element for each saved item`
`const eventElement = document.createElement(‘div’)`
`eventElement.classList.add(‘post-inner’) // You can add a class for styling`
`// Set the innerHTML of the <div> element with the saved HTML structure`
`eventElement.innerHTML = eventHTML`
`// Append the <div> element to the container`
`savedEventsContainer.appendChild(eventElement)`
`})`
`})`