在angular2中如何在手动浏览器刷新/重新加载后保留html5控件值？

Question

我正在尝试使用angular2 app。当我重新加载/刷新浏览器时，我丢失了html5控件中的值。例如，如果我在文本框中有特定值，当我手动刷新页面时，我会丢失该值。有没有什么方法可以保留价值？

谢谢，

的Kd

Answer 1

每次更改模型时，都会在localstorage中保留它，然后onInit将其读回。

角度2的localstorage： https://www.npmjs.com/package/angular-2-local-storage

将它注入您的组件和模块

import { LocalStorageService, LOCAL_STORAGE_SERVICE_CONFIG } from 'angular-2-local-storage';

// Create config options (see ILocalStorageServiceConfigOptions) for deets:
let localStorageServiceConfig = {
   prefix: 'my-app',
    storageType: 'sessionStorage'
};

// Use the provider:
@NgModule({
    imports: [
        ..
    ],
    declarations: [
        ..
    ],
    providers: [
        LocalStorageService,
        {
            provide: LOCAL_STORAGE_SERVICE_CONFIG, useValue: localStorageServiceConfig
        }
    ],
    bootstrap: [AppComponent]
})


import { LocalStorageService } from 'angular-2-local-storage';

@Component({
    // ...    
})
export class SomeComponent {
    constructor (
        private localStorageService: LocalStorageService
    ) {
        // YAY!
    }
}