Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript Help wanted in understanding localStorage

C

cimbat

Coder
Absolute beginner in Javascript here, trying to understand localStorage. My question is: If I want to display a string, let's say a name, in the place of the paragraph, using the code below or something very similar to it, how would I do that? Please correct my mistakes and fill in the dotted lines in your answer. (The use of localStorage would then mean that if I refresh the browser, the name would still remain, as I understand it). Thank you.


Code: 
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>

<button onclick="abc();">Press to Play</button>

<p class="def"></p>

    
    
<script>

localStorage.getItem('...');

function abc () {

    localStorage.setItem('...', '...');
    document.querySelector('.def').innerHTML = ...;
    
    }


</script>

</body>

</html>
 
Solution
T
cimbat said:
Thanks for responding.
It works, but the 'example-name' is already on the page when the page is first loaded, so the onclick event is then rendered useless, so to speak.
Click to expand...
Thanks for telling me! I fixed it, now should work 🙂
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <button onclick="abc();">Press to Play</button>
    <p class="def"></p>

    <script>
        var example = localStorage.getItem('example-title');
        function getlocalstorageitem() {
            if (example === null) {
                document.querySelector('.def').innerHTML = '';
            }
            else {
            document.querySelector('.def').innerHTML = 'example-name';
            }
            
        }...
Sort by date Sort by votes
cimbat said:
Absolute beginner in Javascript here, trying to understand localStorage. My question is: If I want to display a string, let's say a name, in the place of the paragraph, using the code below or something very similar to it, how would I do that? Please correct my mistakes and fill in the dotted lines in your answer. (The use of localStorage would then mean that if I refresh the browser, the name would still remain, as I understand it). Thank you.


Code: 
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>

<button onclick="abc();">Press to Play</button>

<p class="def"></p>

   
   
<script>

localStorage.getItem('...');

function abc () {

    localStorage.setItem('...', '...');
    document.querySelector('.def').innerHTML = ...;
   
    }


</script>

</body>

</html>
Click to expand...
Hi there, you're actually not too far off from your goal 🙂
so there's 2 ways to pull this off...

1) save what you are retrieving from localStorage into a variable, and then assign ('.def').innerHTML to that variable,
OR
2) move that call to getItem down to where you are assigning ('.def').innerHTML
 
Upvote 0 Downvote
Antero360 said:
Hi there, you're actually not too far off from your goal 🙂
so there's 2 ways to pull this off...

1) save what you are retrieving from localStorage into a variable, and then assign ('.def').innerHTML to that variable,
OR
2) move that call to getItem down to where you are assigning ('.def').innerHTML
Click to expand...
Thank you for responding..! 👍
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
I am also a beginner in JS, so tell me if this is not working properly:
(replace your javascript with this)
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <button onclick="abc();">Press to Play</button>
    <p class="def"></p>

    <script>
        function getlocalstorageitem() {
            if (example === null) {}
            else {
            document.querySelector('.def').innerHTML = 'example-name';
            }
        }

        getlocalstorageitem();

        var example = localStorage.getItem('example-name');

        function abc() {
            document.querySelector('.def').innerHTML = 'example-name';
        }
    </script>
</body>
</html>


}

I also made it check if button was clicked on page load to accordingly display the item. Hope this helps!
 
Upvote 0 Downvote
HTML: 
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
<button onclick="abc();">Press to Play</button>
<p class="def"></p>
<script>
let variable = localStorage.getItem('name');
if (variable == null) {
    variable = 'default';
}
function abc() {
    localStorage.setItem('name', variable);
    document.querySelector('.def').innerHTML = variable;
}
</script>
</body>
</html>
You should null check when getting to start and somewhere maybe set that variable. 'name' is a thing you could replace with something else but all must match.
 
Upvote 0 Downvote
Antero360 said:
Did that solve the issue for you?
Click to expand...
Thanks for asking. Could you write it out in code? Because I don't know how to translate your words into code. 😟
The idea is that the name does not exist when the page first loads, then it appears with the onclick event and subsequently does not disappear from the page when the page is refreshed.
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
TrynaLearnJS said:
I am also a beginner in JS, so tell me if this is not working properly:
(replace your javascript with this)
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <button onclick="abc();">Press to Play</button>
    <p class="def"></p>

    <script>
        function getlocalstorageitem() {
            if (example === null) {}
            else {
            document.querySelector('.def').innerHTML = 'example-name';
            }
        }

        getlocalstorageitem();

        var example = localStorage.getItem('example-name');

        function abc() {
            document.querySelector('.def').innerHTML = 'example-name';
        }
    </script>
</body>
</html>


}

I also made it check if button was clicked on page load to accordingly display the item. Hope this helps!
Click to expand...
Thanks for responding.
It works, but the 'example-name' is already on the page when the page is first loaded, so the onclick event is then rendered useless, so to speak.
 
Upvote 0 Downvote
JosiahMaybe said:
HTML: 
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
<button onclick="abc();">Press to Play</button>
<p class="def"></p>
<script>
let variable = localStorage.getItem('name');
if (variable == null) {
    variable = 'default';
}
function abc() {
    localStorage.setItem('name', variable);
    document.querySelector('.def').innerHTML = variable;
}
</script>
</body>
</html>
You should null check when getting to start and somewhere maybe set that variable. 'name' is a thing you could replace with something else but all must match.
Click to expand...
Thanks for your response.
It works partly, but the name disappears from the page when the browser is refreshed, instead of remaining because of localStorage.
 
Upvote 0 Downvote
cimbat said:
Thanks for responding.
It works, but the 'example-name' is already on the page when the page is first loaded, so the onclick event is then rendered useless, so to speak.
Click to expand...
Thanks for telling me! I fixed it, now should work 🙂
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <button onclick="abc();">Press to Play</button>
    <p class="def"></p>

    <script>
        var example = localStorage.getItem('example-title');
        function getlocalstorageitem() {
            if (example === null) {
                document.querySelector('.def').innerHTML = '';
            }
            else {
            document.querySelector('.def').innerHTML = 'example-name';
            }
            
        }

        getlocalstorageitem();


        function abc() {
            document.querySelector('.def').innerHTML = 'example-name';
            localStorage.setItem('example-title', 'example_name');
        }
    </script>
</body>
</html>
 
Upvote 0 Downvote
Solution
Play Snayk 3+, higher dimensional snake game?
cimbat said:
Absolute beginner in Javascript here, trying to understand localStorage. My question is: If I want to display a string, let's say a name, in the place of the paragraph, using the code below or something very similar to it, how would I do that? Please correct my mistakes and fill in the dotted lines in your answer. (The use of localStorage would then mean that if I refresh the browser, the name would still remain, as I understand it). Thank you.


Code: 
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>

<button onclick="abc();">Press to Play</button>

<p class="def"></p>

  
  
<script>

localStorage.getItem('...');

function abc () {

    localStorage.setItem('...', '...');
    document.querySelector('.def').innerHTML = ...;
  
    }


</script>

</body>

</html>
Click to expand...

OPTION 1:
JavaScript: 
var temp equals localStorageDOTgetItem('...') OR 'default';
function myFunc() {
    document.querySelector('.def').innerHTML equals temp;
}

OPTION 2:
JavaScript: 
function myFunc() {
    document.querySelector('.def').innerHTML equals localStorageDOTgetItem('...') OR 'default';
}

OPTION 3:
JavaScript: 
function checkLocalStorage() {
    if( localStorageDOTgetItem('') EqualsEqualsEquals null )
        localStorageDOTsetItem('...', 'whatItsSupposedTobe')
}

//combine with either option 1 or 2 for next part


Granted, I did leave some areas for you to fix 😉
 
Upvote 0 Downvote
TrynaLearnJS said:
Thanks for telling me! I fixed it, now should work 🙂
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <button onclick="abc();">Press to Play</button>
    <p class="def"></p>

    <script>
        var example = localStorage.getItem('example-title');
        function getlocalstorageitem() {
            if (example === null) {
                document.querySelector('.def').innerHTML = '';
            }
            else {
            document.querySelector('.def').innerHTML = 'example-name';
            }
           
        }

        getlocalstorageitem();


        function abc() {
            document.querySelector('.def').innerHTML = 'example-name';
            localStorage.setItem('example-title', 'example_name');
        }
    </script>
</body>
</html>
Click to expand...
Hey thanks. It works..! :blush::thumbsup:
 
Upvote 0 Downvote
Antero360 said:
OPTION 1:
JavaScript: 
var temp equals localStorageDOTgetItem('...') OR 'default';
function myFunc() {
    document.querySelector('.def').innerHTML equals temp;
}

OPTION 2:
JavaScript: 
function myFunc() {
    document.querySelector('.def').innerHTML equals localStorageDOTgetItem('...') OR 'default';
}

OPTION 3:
JavaScript: 
function checkLocalStorage() {
    if( localStorageDOTgetItem('') EqualsEqualsEquals null )
        localStorageDOTsetItem('...', 'whatItsSupposedTobe')
}

//combine with either option 1 or 2 for next part


Granted, I did leave some areas for you to fix 😉
Click to expand...
Thanks. :thumbsup: Now I will have something to chew on for the next few days. 😀
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom