Angular 2使用LocalStorage在页面刷新时保持从下拉列表中选择

Question

我正在尝试获取下拉列表，以便在用户刷新页面时显示所选选项。我有本地存储工作来存储当前所选选项的值，但我需要它在我离开页面后显示所选选项并返回。

HTML：

<form #languagesSettings="ngForm">
    <div class="form-group row">
        <label for="languages">Language</label>
        <select (change)="selectLanguage($event)" class="form-control" name="languages" id="languages">
            <option selected = "selected" value="en">English</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <option value="ru">Russian</option>
        </select>
    </div>
</form>

angular（typescript）：

public selectLanguage(event: any): void {
        const lang = event.target.value;
        localStorage.setItem('language', lang )
    }

Answer 1

我全心全意地鼓励您不要将本地存储用于此用例。 使用服务将选定的索引/选项存储在公共字段中，并在 ngOninit 中调用该服务以检索值。将服务作为单例实例运行。

通过这种方式，您将永远不会遇到浏览器不兼容问题，并且如果需要，将来可以轻松地在多个组件中分发存储的值。

如果您需要代码示例，请告诉我。