Question

我已按照以下链接中描述的步骤进行操作：

angular-localstorage4 当我尝试从angular-localstorage导入WebStorageModule和LocalStorageService时。虽然编译成功，但我在控制台中收到以下错误。非常感谢任何帮助。

我的app.module.ts文件如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatButtonModule, MatCheckboxModule, MatSidenavModule } from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule} from '@angular/forms';
import { AppComponent } from './app.component';
import { LoginComponent } from './login.component';
import { AppRoutingModule } from './/app-routing.module';
import { HeaderComponent } from './header/header.component';
import { NavigationComponent } from './navigation/navigation.component';
import {MatSidenav} from '@angular/material/sidenav';
import { MatIconModule } from "@angular/material/icon";
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
**import {WebStorageModule, LocalStorageService} from 'angular-localstorage';**
@

NgModule({
      declarations: [
        AppComponent,
        LoginComponent,
        HeaderComponent,
        NavigationComponent,
        DashboardComponent,
        ProfileComponent,
      ],
      imports: [
        BrowserModule,
        MatButtonModule,
        MatSidenavModule,
        MatCheckboxModule,
        FormsModule,
        MatIconModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        **WebStorageModule**   //That is when the problem appears
      ],
      providers: [//LocalStorageService
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Answer 1

您收到此错误b'coz没有为index.html中的LocalStorageService.Add CDN依赖项定义模块并添加angular.module('myApp', ['LocalStorageModule',....])。

此外，如果要修改本地存储的现有配置，则可以在.config中添加“localStorageServiceProvider”并提供自定义配置。 for supporting Doc

要在控制器中使用它，只需注入'localStorageService'angular.module(myApp).controller('myCtrl', ['localStorageService', ....])

设置值，您可以使用localStorageService.set(key, val);并检索使用var value = localStorageService.get(key);

希望这可以帮助你

Answer 2

我们可以使用LocalStorageService和SessionStorageService ngx-webstorage。

此ngx-webstorage库提供了一种使用服务来管理Angular应用程序中的Web存储（即本地和会话）的简便方法。

但我想建议我们可以像在javascript中一样使用localStorage和sessionStorage，因为我们知道 Typescript 是javascript的超集。使用它我们也不需要在我们的应用程序中添加额外的库。

localStorage的

您可以将字符串和数组存储到位置存储中。

要在localStorage中存储数据，我们使用setItem();

localStorage.setItem(key, value);

并使用数组我们可以将其写为

let key: 'employee'; 
let value: [{'name':'Elon','email':'elon@spaceX.com'}, 
            {'name':'Elon Musk','email':'elon.m@tesla.com'}];
value = JSON.stringify(value);

localStorage.setItem(key, value);

现在，为了从localStorage获取存储数据，我们使用getItem();

const item = localStorage.getItem('key');

例如

const emp = localStorage.getItem('employee');

我们也可以分别使用localStorage.removeItem('key');和localStorage.clear();从localStorage中删除和清除数据。

注意：在ngx-webstorage中，您将获得不同的函数来存储，读取和清除localStorage和装饰器的使用。链接：https://www.npmjs.com/package/ngx-webstorage

Answer 3

虽然我无法为我的问题找到任何可行的解决方案，但我发现了另一种用于同一目的的替代方案。我没有使用angular-localstorage，而是使用 angular-async-local-storage 来完成这项工作。

"angular-async-local-storage": "^3.1.1",

我无法配置angular-localstorage4

3 个答案: