@acpaas-ui/ngx-localstorage 中文文档教程

Question

@acpaas-ui/ngx-localstorage

antwerp-ui localstorage 服务允许您轻松地在浏览器存储中存储和检索数据。

Usage

import { LocalstorageModule } from '@acpaas-ui/ngx-localstorage';

Documentation

访问我们的文档网站，获取完整的操作文档和指南

Localstorage service

Methods

Method	Description
setItem(key: string, value: any): void	store an item in the localstorage and update the subscribers (all data is stringified to a JSON string).
getItem<T = any>(key: string): T	retrieve an item from the localstorage (all data is parsed from a JSON string).
removeItem(key: string): void	remove an item from the localstorage and update the subscribers.
clear(...args): void	clear the localstorage.
select<T = any>(selector: Selector, comparator: Comparator = LocalstorageHelper.comparator): BehaviorSubject<T>	get a BehaviorSubject containing the selected value.
clearSubscribers(): void	unsubscribe all subscribers.

Storage type

您可以在 forRoot 导入 LocalstorageModule 时的方法。 默认情况下，该服务将验证类型是否存在并回退到 localStorage。 如果 localStorage 不可用，将使用内存中的 polyfill。

Identifier

您可以提供将在实例化 LocalstorageService 时检查的自定义标识符。 如果在存储中找到的标识符与配置不同，存储将被清除。

这样，您可以使您的应用程序存储失效以防止数据冲突。

Example

import { LocalstorageModule } from '@acpaas-ui/ngx-localstorage';

@NgModule({
    imports: [
        LocalstorageModule.forRoot({
            storageType: 'sessionStorage',
            identifier: 'my-app-v1',
        })
    ]
});

export class AppModule {};

import { LocalstorageService } from '@acpaas-ui/ngx-localstorage';

public user: any;
public item: any;
public timesUsed: any;

constructor(
    private localstorageService: LocalstorageService
) {
    this.user = this.localstorageService.select('user');
    this.timesUsed = 0;
    this.localstorageService.setItem('number', this.timesUsed);
}

public loggedIn(): void {
    this.localstorageService.setItem('user', 'You are logged in');
}

public loggedOut(): void {
    this.localstorageService.setItem('user', 'You are logged out');
}

public init(): void {
    this.localstorageService.removeItem('user');
    this.timesUsed = this.timesUsed + 1;
    this.localstorageService.setItem('number', this.timesUsed);
}

public clear(): void {
    this.localstorageService.clear('user', 'number');
}

public getItem(): any {
    this.item = this.localstorageService.getItem('user');
    this.timesUsed = this.localstorageService.getItem('number');
}

<div class="u-margin-bottom">
    <button type="button" (click)="loggedIn()" class="a-button u-margin-right">
        Log in
    </button>
    <button type="button" (click)="loggedOut()" class="a-button u-margin-right">
        Log out
    </button>
    <button type="button" (click)="init()" class="a-button u-margin-right">
        Count clicks
    </button>
</div>
<div class="u-margin-bottom">
    <button type="button" (click)="getItem()" class="a-button u-margin-right">
        Get from local storage
    </button>
    <button type="button" (click)="clear()" class="a-button">
        Clear local storage
    </button>
</div>
<div class="u-margin-bottom">
    <label class="a-input__label a-input__label--inline">{{ this.item }}</label>
</div>
<div class="u-margin-bottom">
    <label class="a-input__label a-input__label--inline">You clicked the count clicks button this many times: {{ this.timesUsed }}</label>
</div>

Contributing

请访问我们的贡献指南，了解有关如何贡献的更多信息。