Question

我正在使用ControlValueAccessor将div标签更改为表单元素，并且正在使用localStorage设置和获取数据。我遇到的问题是我的product_name项没有保存，刷新页面后，product_name消失了。如何更改代码，以便页面刷新后数据仍然存在？

在HTML模板中：

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

在控制器中：

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

Answer 1

如您所知，localStorage 应该保持不变。我怀疑“：其他”可能正在发生...

建议：

本文有一些很棒的提示：

Persist data using Local Storage and Angular
尤其是，要明确检查浏览器是否支持本地存储：
```
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class LocalStorageService {
  localStorage: Storage;
  ...
  constructor() {
    this.localStorage   = window.localStorage;
  }
  ...
   get isLocalStorageSupported(): boolean {
     return !!this.localStorage
   }
}
```
1. 我一定会像本文一样构造您的代码。具体来说，建议您将localStorage访问权限放到它自己的单独的Angular服务中。
2. 在该服务中添加调试工具（例如console.log()语句），以确保一切正常，至少就localStorage的存储，获取和持久性而言。

'希望有帮助！

刷新页面后，localStorage数据消失

1 个答案: