iwato Posted August 18, 2018 Share Posted 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 18, 2018 Share Posted August 18, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
iwato Posted August 18, 2018 Author Share Posted August 18, 2018 Yes, the HTML was placed before the Javascript. Roddy Link to comment Share on other sites More sharing options...
dsonesuk Posted August 18, 2018 Share Posted 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> 1 Link to comment Share on other sites More sharing options...
iwato Posted August 19, 2018 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now