Angular: 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;">Bike</div>

In the controller:

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

I haven’t deployed the program to a production server yet so it’s re-compiling every time on my localhost when I refresh the page. That’s probably why I lose the localStorage.

When your add function is called, after the setItem line, does your browser’s local storage show the value? If not, then there’s something wrong with your localStorage service.

As a side note, the second line of your add function is bypassing the component-template relationship in Angular.