how to store javascript variables with cookies js

Question

I'm trying to make a simple program that stores the h1 value in a variable and then store it in a cookie. But whenever I reload the page the h1 value always goes back to 0 and is not being saved. Can someone please explain how I can save the variable in a cookie so when I reload the page it stays there.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <div class="container">
        <h1 id="hs">1 </h1> <img src="image01.jpg" width="960" height="640" />
        <button onclick="increase()" id="d">Increase value of cookie</button>
    </div>
    <script src="cookies.min.js"></script>
    <script>
        Cookies.set('name', 'leo');
        Cookies.set('nams', 'ddleo');
        var h = document.getElementById("hs");

        function increase() {
            var values = parseInt(document.getElementById('hs').innerHTML, 10);
            values++;
            Cookies.set("name", values);
            document.getElementById('hs').innerHTML = Cookies.get("name", values);
        }
    </script>
</body>

</html>

Barmar · Accepted Answer · 2017-03-29 21:51:46Z

2

When the page loads, you need to replace the <h1> with the value from the cookie.

var h=document.getElementById("hs");
var value = Cookies.get('name');
if (value) {
    h.innerHTML = value;
}

answered Mar 29, 2017 at 21:51

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bobby Matson · Accepted Answer · 2017-03-29 21:50:44Z

0

When you refresh the page, the DOM doesn't know anything about the value of that cookie. It needs to be explicitly set.

This line:

document.getElementById('hs').innerHTML=Cookies.get("name",values);

should be run on page load, before you define the function increase:

var h = document.getElementById("hs");

# initial setting of h1:
var initialValue = Cookies.get("name",values);

if(initialValue) {
  h.innerHTML = initialValue;
}

function increase(){
  # dynamic setting of h1 (via the click handler you set up)
}

answered Mar 29, 2017 at 21:50

Bobby Matson

1,48812 silver badges14 bronze badges

Collectives™ on Stack Overflow

how to store javascript variables with cookies js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related