Jump to content
iwato

Using localStorage as Substitute for Cookie

Recommended Posts

BACKGROUND:  I am baffled by the failure of this code to display "Return User" when the browser page is refreshed or the browser page is closed and then reopened.  The vslue of the console.log(localStorage) displays:  Storage { return_user: "true", length: 1 }

CODE:

const output = document.querySelector('.output');
if (typeof localStorage !== "undefined") {
    var localStorage = window.localStorage;
    if(localStorage.getItem("return_user")) {
        output.innerHTML = "Return User";
    } else {
        output.innerHTML = "New User";
        localStorage.setItem("return_user", true);
		console.log(localStorage);
    }
} 
else {
    output.innerHTML = "Sorry, local storage is not supported.";
}

QUESTION:  Any ideas?

 

Roddy

Share this post


Link to post
Share on other sites

It seems to look correct to me, I suppose you did place it below the elements its targetting with class 'output' ?, as they need to be rendered on the page before referencing by JavaScript.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Yes, the HTML was placed before the Javascript.

Roddy

Share this post


Link to post
Share on other sites

Well this worked for me

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0">
        <title>Document Title</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

        <style>

        </style>
    </head>
    <body>
        <div class="output">TODO write content</div>
        <div class="output">TODO write content</div>
        <script>
            const output = document.querySelector('.output');
            if (typeof localStorage !== "undefined") {
                var localStorage = window.localStorage;
                if (localStorage.getItem("return_user")) {
                    output.innerHTML = "Return User";
                } else {
                    output.innerHTML = "New User";
                    localStorage.setItem("return_user", true);
                    console.log(localStorage);
                }
            }
            else {
                output.innerHTML = "Sorry, local storage is not supported.";
            }
        </script>
    </body>
</html>

 

  • Thanks 1

Share this post


Link to post
Share on other sites

Alas, I was inadvertently clearing the window.localStorage property in a statement of a prior routine that illustrates the use of the window.localStorage.clear() function.

Please go to the Grammar Captive mainpage and confirm or disconfirm whether return visitors are  compelled to view the Grammar Captive splash panel.  If no, click on Roddy's image to insure that the splash panel is still available to return visitors at their own request.

Hopefully, visitors are compelled to view the splash panel only once, but are still able to view it as many times as they wish thereafter.

Roddy

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×