Angular: LocalStorage和SessionStorage的例子

迪鲁宾
627 阅读3分钟

Angular中的本地存储

在本教程中，我们将学习以下内容

  • Angular中的本地存储
  • Angular中的SessionStorage
  • Ngx-webstorage angular

LocalStroage是浏览器存储数据的机制。

数据是用键和值对来存储的

Ngx-webstorage库简介

该库提供了用于管理Angular 2应用程序的LocalStorage和SessionStorage对象的封装类。当你的应用程序需要访问网络存储API时，你可以直接调用这些API，因为这些API在HTML5中是内置的支持。但你必须写大量的代码来处理所有的使用情况。相反，使用流行的库，如ngx-webstorage。使用外部库，当浏览器不支持Web存储API时，你有优势，它们有一个内置的机制，默认为基本内存。我们需要一个基于typescript的库。这提供了简单的服务，你可以将其整合到你的Angular4应用程序中。有很多其他的模块在做同样的事情，但这个模块支持未来的版本。这个模块支持NPM包管理器

使用NPM安装ngx-webstorage

首先使用下面的npm命令下载ngx-webstorage库

npm install --save ngx-webstorage.

将其安装为项目依赖，并保存在项目node_module文件夹下。-保存选项将此模块更新到package.json中，并在依赖项中加入以下条目

"ngx-webstorage": "^2.0.1",

在Angular应用程序中配置，一旦安装，首先需要在你的根模块中注册模块，为此，在你的主模块中导入Ng2Webstorage。Ng2Webstorage有不同的服务 LocalStorageService - LocalStorage的服务封装器 SessionStorageService - SessionStorage的服务封装器

import {NgModule} from '@angular/core';  
import {BrowserModule} from '@angular/platform-browser';  
import {Ng2Webstorage} from 'ngx-webstorage';  
   
@NgModule({  
    imports: [  
        BrowserModule,  
        Ng2Webstorage,  
  
    ],  
})  
export class AppModule {  
}

下一步是将这些服务--LocalStorageService,SessionStorageService注入到你的组件中，如下图所示

import {Component} from '@angular/core';  
import {LocalStorageService} from 'ngx-webstorage';  
   
@Component({  
    selector: 'storageTest',  
    template: `  
        

  

  
`,  
})  
export class StorageComponent {  
   
    attribute;  
   
    constructor(private storage:LocalStorageService) {}  
   
// save the  data using store methods  
this.storage.store('key', 'test');  
   
//retrieve using the key in string   
 this.storage.retrieve('key');  
}

而不是直接注入到组件中，总是写一段代码，在一个通用的服务API中完成与该服务相关的所有操作，这样所有的组件都可以像这样重复使用。SessionStorageService也提供了与LocalStorageService相同的方法

@LocalStorage @SessionStorage 装饰器

装饰器是用来装饰类和方法的，就像java语言中的注释。请看下面的例子，代码是如何用装饰器更新会话存储的。

 @SessionStorage('key')  
    mykey;  
   
    modifyValue() {  
        this.mykey.push('testvalue for a key');  
        this.mykey = this.mykey;   
    }

同样的代码在Angular 2,4,5和6版本中也可以使用。

ngx网络存储方法

以下方法既可用于本地存储，也可用于会话存储
Store( key: string, value: any ): void
-如果键不存在，就保存键和值。如果键存在，就更新值。
Retrieve( key:string ):any
-这个检索特定键的值
Clear( key?: string ): void
-这个删除特定键的存储
IsStorageAvailable(): boolean
-如果本地存储/会话存储支持，这个返回true，如果不支持，返回false
Observe( key? : string ):EventEmitter
-这将返回Event Emitter，用于观察存储对象的键。

如果你有任何问题/需要更多澄清，请联系我

avatar
文章
阅读
粉丝