Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using localStorage() to save a "closed" state on modal so it doesn't show for that user again

I have a pop-over modal that I am loading on my page on load, I would like to make it once it's closed to not show up again for that user. I've done similar things with localStorage(); but for some reason can't figure out the syntax to make this work.

I tried a solution where it sets a class, but on refresh it will reload the original element, so now I am trying this idea where I change the state of of the modal to "visited". Any ideas what I could be missing to get this to work in the same way I'm hoping?

localStorage function:

$(function() {

    if (localStorage) {
        if (!localStorage.getItem('visited')) { 
            $('.projects-takeover').show(); 
        }
    } else { 
        $('.projects-takeover').show();
    }

    $('.projects-close').click(function() {
            $('.projects-takeover').fadeOut();
    });
        localStorage.setItem('visited', true);
        return false;
    });

Here is a jsfiddle with the code implemented as well, thanks for the help!

like image 308
knocked loose Avatar asked Oct 07 '16 12:10

knocked loose


People also ask

Does local storage persist when browser is closed?

localStorage is similar to sessionStorage , except that while localStorage data has no expiration time, sessionStorage data gets cleared when the page session ends — that is, when the page is closed.

Does localStorage clear on refresh?

localStorage demo The data does not expire. It remains after the browser restart and even OS reboot.

How save state in local storage react?

To begin extracting the localStorage logic, create a file called useLocalStorage. js in the src folder and add the following code: import { useState, useEffect } from "react"; function getStorageValue(key, defaultValue) { // getting stored value const saved = localStorage. getItem(key); const initial = JSON.

Can I use localStorage in incognito mode?

Local Storage data stored on normal browsing sessions will not be available when you open a browser in private browsing or in Incognito mode. Local Storage data will not get cleared even if you close the browser.


1 Answers

You javascript code is correct. Good thing you added a jsfiddle as the problem becomes very easy to identify - the modal's style is set in such a way that it is always visible. Simply change the display property to nonе in the .projects-takeover class and it should work. Check out the updated fiddle

like image 69
Vasil Dininski Avatar answered Oct 20 '22 00:10

Vasil Dininski