localStorage data disappears after the page is refreshed

[Maureen Moore]

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");
}

[tha...@rikkeisoft.com]

document.querySelector('.product_name')  return an array, not an object. You can try:

 (document.querySelector('.product_name') as HTMLCollection)[0].innerText = localStorage.getItem("product_name");

Btw, why don't you use product_name instead of localStorage.getItem("product_name") ?

[Maureen Moore]

Thank, tha...@rikkeisoft.com 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.