Using localStorage as Substitute for Cookie

iwato · August 18, 2018

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

dsonesuk · August 18, 2018

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 August 18, 2018 by dsonesuk

iwato · August 18, 2018

Yes, the HTML was placed before the Javascript.

Roddy

dsonesuk · August 18, 2018

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>

iwato · August 19, 2018

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

Sign In

Using localStorage as Substitute for Cookie

Recommended Posts

iwato

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

iwato

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

iwato

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity