Angular LocalStorage、SessionStorage实例 | Ngx-webstorage教程

迪鲁宾
464 阅读3分钟

我们将学习如何在Angular应用程序中的网络存储中存储用户数据。

在Angular 13教程中，你将学习如何将用户数据保存到本地存储和浏览器中的会话。

Angular中的本地存储

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

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

你可以查看我之前发布的关于Html5网络存储API与实例的文章。
LocalStroage是一种浏览器存储机制，用于存储数据。

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

Angular 13 本地存储示例

  • 第1步 创建Angular应用程序
  • 第2步 安装依赖项
  • 第3步 创建组件
  • 第4步 创建会话存储服务
  • 第5步 更新应用程序组件
  • 第6步 启动Angular应用程序

如果你没有一个Angular应用程序，不用担心，运行下面的命令就可以为你生成一个。

你可以使用ng new命令来建立一个Angular应用程序

ng new angular-service-examples

转到根文件夹

cd angular-service-examples

Angular 13 ngx-webstorage示例

当你的应用程序需要访问网络存储API时，你可以直接使用HTML5的API。

然而，为了适应所有的用例，你需要编写大量的代码。相反，可以利用知名的库，如ngx-webstorage。

ngx-webstorage 是一个npm库和包装API，用于管理Nodejs应用程序的 和 对象。LocalStorage SessionStorage

使用外部库（如ngx-webstroage ）的优点是 当浏览器没有实现Web存储API时，它利用了标准的浏览器存储cookie和会话cookie。

Angular应用程序是基于类型脚本的。我们需要一个基于typescript的库。

它提供了简单的服务，你可以将其整合到你的Angular应用程序中。有很多其他的模块在做同样的事情，但这个模块支持未来的版本。它支持NPM包管理器。

使用NPM安装ngx-webstorage

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

npm, install --save ngx-webstorage.

它作为项目的依赖项安装，并保存在项目的node_module文件夹下。--save ，将此模块更新为package.json ，在依赖项部分有如下条目。

"ngx-webstorage": "^9.0.0",

在Angular应用程序中配置，一旦安装，首先需要在你的根模块中注册该模块，为此，在你的主模块中导入Ng2Webstorage。

Ng2Webstorage有不同的服务LocalStorageService -LocalStorage 的服务包装器SessionStorageService - 的服务包装器。SessionStorage

import {NgModule} from '@angular/core';  
import {BrowserModule} from '@angular/platform-browser';  
import {NgxWebstorageModule} from 'ngx-webstorage';  
   
@NgModule({  
    imports: [  
        BrowserModule,  
        NgxWebstorageModule.forRoot(),  
  
    ],  
})  
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
  • this remove the storage for specific key
    IsStorageAvailable(): boolean
    -如果本地存储/会话存储支持，则返回true，如果不支持则返回false
    Observe( key?: string ):EventEmitter
    -这将返回Event Emitter，用于观察存储对象的键。

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

avatar
文章
阅读
粉丝