localStorage data disappears after the page is refreshed

I am using a ControlValueAccessor to change my div tag to a form element and I am using localStorage to set and get my data. I am having the problem that my product_name item isn't being saved and after I refresh the page, the product_name disappears. How can I change my code so that the data persists after a page refresh?

In the HTML template:

<div class="product_name" name="p_name">div>
<div name="product_name" (click)="add('Bike')" style="cursor:pointer;">Bikediv>

In the controller:

add(product_name){
localStorage.setItem("product_name", product_name);
(document.querySelector('.product_name') as HTMLElement).innerText = localStorage.getItem("product_name");
}