How to use localstorage data in the body of an HTML 5 website

How do I call the localStorage variables into the body of the website? Each variable will go under the matching tag. The code I am working on is below.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript"></script>
</head>
<body>
<h2>Homemade Beer</h2>
The production time is: 


<h2>Homemade Cider</h2>


<h2>Moonshine</h2>

<h2>Homemade Wine</h2>

<script>


    localStorage.setItem("MoonShineProductionTime", "4");


    localStorage.setItem("AppleCiderProductionTime", "5");


    localStorage.setItem("HomemadeBeerProductionTime", "4");


    
    localStorage.setItem("HomemadeWineProductionTime", "7");
    

</script>

I tried:

Homemade Beer

The production time is: JSON.parse(window.localStorage.getItem(‘HomemadeBeerProductionTime’));

The lined was shown on the web browser with no stored value.