如何在Angular中使用本地存储[重复]答案

【问题标题】：How to use Local storage in Angular [duplicate]如何在Angular中使用本地存储[重复]
【发布时间】：2023-03-18 16:29:01
【问题描述】：

我需要在浏览器的会话中存储数据并检索数据，直到会话退出。您如何在 Angular 2 中使用本地和会话存储？

【问题讨论】：

标签： javascript angular local-storage session-variables

【解决方案1】：

使用Angular2 @LocalStorage模块，描述为：

这个小小的 Angular2/typescript 装饰器让它超级容易保存并自动恢复指令中的变量状态（类属性）使用 HTML5 的 LocalStorage。

如果您需要使用 cookie，您应该看看： https://www.npmjs.com/package/angular2-cookie

【讨论】：

目前无人维护。
angular2-cookie 项目的继承者是 ngx-cookie npmjs.com/package/ngx-cookie
有维护和更强大（例如监听存储变化，支持cookies和临时内存）ngx-store库兼容angular2-localstorage

【解决方案2】：

标准的localStorage API 应该可用，例如：

localStorage.setItem('whatever', 'something');

它是pretty widely supported。

请注意，如果您还没有 "lib" 数组，则需要将 "dom" 添加到 tsconfig.json 中。

【讨论】：

typescript 非常适合我。您是否找到了解决此问题的方法，而无需使用列出的 npm 来获取其他答案？
@Winnemucca "throwing fit" 不是一个有用的问题陈述。我不记得添加了 Angular CLI 以外的任何内容。
我很抱歉。我必须进入我的 ts.config 文件来修复它。 “lib”：[“es2016”，“dom”]。您是否已经添加了“dom”？
@Winnemucca 是的，这是由 CLI 设置的。我已将其添加到答案中。
localStorage.getItem('key'); localStorage.setItem('key','value');

【解决方案3】：

如上所说，应该是：localStorageService.set('key', 'value');和localStorageService.get('key');

【讨论】：

它在我的 angular 4 项目中为我工作，我要感谢你节省了我的时间。
在 api web 上没有找到关于 localStorageService 的文档，我在哪里可以找到这个？

【解决方案4】：

如何从 localStorage 存储、检索和删除数据：

// General syntax for storing data
localStorage.setItem('key', 'value');
// Also note that both the key & the value has to be strings. 
// So we stringify the value(if it's an object) before setting it.

// So, if you have an object that you want to save, stringify it like this

let data = {
  'token': 'token',
  'name': 'name'
};
localStorage.setItem('myLSkey', JSON.stringify(data));

// OR for individual key-value pairs
localStorage.setItem('myLSkey', JSON.stringify({
  'token': 'token',
  'name': 'name'
}));

// To retrieve the data & save it to an existing variable
data = JSON.parse(localStorage.getItem('myLSkey'));

// To remove a value/item from localStorage
localStorage.removeItem("myLSkey");

提示：
您也可以为您的 Angular 应用程序使用包，它基于本机 localStorage API（我们在上面使用的）来实现这一点您不必担心字符串化和解析。看看这个角度 5 及以上的包装。 @ngx-pwa/local-storage

您也可以在 Google 上快速搜索可能，angular local 存储空间，并找到一个拥有更多 Github 星等的包。

查看此page 以了解有关 Web Storage API 的更多信息。

【讨论】：

感谢 JSON 解析技巧！
很高兴能帮上忙
我希望我能不止一次地支持这个答案。我意识到，由于我的值是一个布尔值，我需要对其进行字符串化以设置本地存储值。
对于 Angular 8，您还可以查看这个更简单的包：npmjs.com/package/@cedx/ngx-webstorage

【解决方案5】：

我们可以很方便地使用localStorage来设置数据和接收数据。

注意：它适用于 angular2 和 angular 4

//set the data
localStorage.setItem(key, value);   //syntax example
localStorage.setItem('tokenKey', response.json().token);

//get the data
localStorage.getItem('tokenKey')

//confirm if token is exist or not
return localStorage.getItem('tokenKey') != null;

【讨论】：

【解决方案6】：

本地存储集项目

语法：

  localStorage.setItem(key,value);
  localStorage.getItem(key);

示例：

  localStorage.setItem("name","Muthu");
  if(localStorage){   //it checks browser support local storage or not
    let Name=localStorage.getItem("name");
    if(Name!=null){  //  it checks values here or not to the variable
       //do some stuff here...
    }
  }

你也可以使用

    localStorage.setItem("name", JSON.stringify("Muthu"));

会话存储设置项

语法：

  sessionStorage.setItem(key,value);
  sessionStorage.getItem(key);

示例：

  sessionStorage.setItem("name","Muthu");

  if(sessionStorage){ //it checks browser support session storage/not
    let Name=sessionStorage.getItem("name");

    if(Name!=null){  //  it checks values here or not to the variable
       //do some stuff here...
    }
  }

你也可以使用

   sessionStorage.setItem("name", JSON.stringify("Muthu"));

轻松存储和检索数据

【讨论】：

【解决方案7】：

保存到 LocalStorage：

localStorage.setItem('key', value);

对于具有属性的对象：

localStorage.setItem('key', JSON.stringify(object));

从本地存储中获取：

localStorage.getItem('key');

对于对象：

JSON.parse(localStorage.getItem('key'));

localStorage 对象将数据保存为字符串并检索为字符串。您需要解析所需的输出如果值是存储为字符串的对象。例如parseInt(localStorage.getItem('key'));

最好使用框架提供的 localStroage 而不是 3rd 方库 localStorageService 或其他任何东西，因为它可以减少您的项目大小。

【讨论】：

【解决方案8】：

安装“angular-2-local-storage”

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

【讨论】：

“如果你真的需要某事发生时” :) 来自npmjs.com/package/angular-2-local-storage
如果你能提供一个如何使用这个LocalStorageService的例子，这个答案会更好。

【解决方案9】：

您可以使用 cyrilletuzi 的 LocalStorage Asynchronous Angular 2+ Service。

安装：

$ npm install --save @ngx-pwa/local-storage

用法：

// your.service.ts
import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class YourService {
   constructor(private localStorage: LocalStorage) { }
}

// Syntax
this.localStorage
    .setItem('user', { firstName:'Henri', lastName:'Bergson' })
    .subscribe( () => {} );

this.localStorage
    .getItem<User>('user')
    .subscribe( (user) => { alert(user.firstName); /*should be 'Henri'*/ } );

this.localStorage
    .removeItem('user')
    .subscribe( () => {} );

// Simplified syntax
this.localStorage.setItemSubscribe('user', { firstName:'Henri', lastName:'Bergson' });
this.localStorage.removeItemSubscribe('user');

【讨论】：

同步操作异步有什么意义？
我想在不阻塞ui的情况下处理大量数据
但是无论如何操作必须在后台同步完成，不是吗？
对不起，我不知道……如果你愿意，请给作者回答这个问题，并让我们知道他的回应。
我认为他只是使用了与 IndexedDB 相同的代码，异步工作。

【解决方案10】：

这是一个简单服务的示例，它使用 localStorage 来持久化数据：

import { Injectable } from '@angular/core';

@Injectable()
export class PersistanceService {
  constructor() {}

  set(key: string, data: any): void {
    try {
      localStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.error('Error saving to localStorage', e);
    }
  }

  get(key: string) {
    try {
      return JSON.parse(localStorage.getItem(key));
    } catch (e) {
      console.error('Error getting data from localStorage', e);
      return null;
    }
  }
}

要使用此服务，请像往常一样在应用程序的某个模块中提供它，例如在核心模块中。然后像这样使用：

import { Injectable } from '@angular/core';

@Injectable()
export class SomeOtherService {

  constructor(private persister: PersistanceService) {}

  someMethod() {
    const myData = {foo: 'bar'};
    persister.set('SOME_KEY', myData);
  }

  someOtherMethod() {
    const myData = persister.get('SOME_KEY');
  }
}

【讨论】：

太棒了！刚刚制作了一个相同的示例脚本。网址：stackblitz.com/edit/…

【解决方案11】：

您也可以考虑使用我维护的库：ngx-store (npm i ngx-store)

它使使用 localStorage、sessionStorage 和 cookie 变得异常容易。有一些支持的方法来操作数据：

1) 装饰者：

export class SomeComponent {
  @LocalStorage() items: Array<string> = [];

  addItem(item: string) {
    this.items.push(item);
    console.log('current items:', this.items);
    // and that's all: parsing and saving is made by the lib in the background 
  }
}

装饰器存储的变量也可以在不同的类之间共享 - 还有为它设计的 @TempStorage()（别名为 @SharedStorage()））装饰器。

2) 简单的服务方式：

export class SomeComponent {
  constructor(localStorageService: LocalStorageService) {}

  public saveSettings(settings: SettingsInterface) {
    this.localStorageService.set('settings', settings);
  }

  public clearStorage() {
    this.localStorageService.utility
      .forEach((value, key) => console.log('clearing ', key));
    this.localStorageService.clear();
  }
}

3) 建造者模式：

interface ModuleSettings {
    viewType?: string;
    notificationsCount: number;
    displayName: string;
}

class ModuleService {
    constructor(public localStorageService: LocalStorageService) {}

    public get settings(): NgxResource<ModuleSettings> {
        return this.localStorageService
            .load(`userSettings`)
            .setPath(`modules`)
            .setDefaultValue({}) // we have to set {} as default value, because numeric `moduleId` would create an array 
            .appendPath(this.moduleId)
            .setDefaultValue({});
    }

    public saveModuleSettings(settings: ModuleSettings) {
        this.settings.save(settings);
    }

    public updateModuleSettings(settings: Partial<ModuleSettings>) {
        this.settings.update(settings);
    }
}

另一个重要的事情是你可以监听（每一个）存储变化，例如（以下代码使用 RxJS v5 语法）：

this.localStorageService.observe()
  .filter(event => !event.isInternal)
  .subscribe((event) => {
    // events here are equal like would be in:
    // window.addEventListener('storage', (event) => {});
    // excluding sessionStorage events
    // and event.type will be set to 'localStorage' (instead of 'storage')
  });

WebStorageService.observe() 返回一个常规的 Observable，因此您可以压缩、过滤、反弹它们等。

我总是乐于听取帮助我改进这个库及其文档的建议和问题。

【讨论】：

decorators 与 services 方法有什么区别？
主要是语法，装饰器是最容易使用的，最适合原型设计。对于更高级的用例，服务是不可替代的 - 您可以准确地更新您想要的内容，因此复杂的数据结构变得更容易并提供更好的性能。
谢谢丹尼尔，完美的工作。你的图书馆今天对我帮助很大！ :)

【解决方案12】：

真正优雅的解决方案是装饰器。您可以使用它们来标记要存储的变量。

export class SomeComponent {

  @LocalStorage
  public variableToBeStored: string;

}

Example how to achieve it is in this article (my blog)

【讨论】：

链接可能会中断。最好将示例直接放入您的答案中。

【解决方案13】：

在本地存储中设置项目或对象：

   localStorage.setItem('yourKey', 'yourValue');

要在本地存储中获取项目或对象，您必须记住您的密钥。

   let yourVariable = localStorage.getItem('yourKey');

要将其从本地存储中删除：

   localStorage.removeItem('yourKey');

【讨论】：

【解决方案14】：

设置项的语法是

localStorage.setItem(key,value);

get item的语法是

localStorage.getItem(key);

一个例子是：

localStorage.setItem('email','abc@gmail.com');
    let mail = localStorage.getItem("email");
    if(mail){ 
       console.log('your email id is', mail);
    }
  }

【讨论】：

【解决方案15】：

安装

npm install --save @ngx-pwa/local-storage

首先你需要安装“angular-2-local-storage”

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

保存到本地存储：

localStorage.setItem('key', value);

从本地存储中获取：

localStorage.getItem('key');

【讨论】：

【解决方案16】：

存储在LocalStorage：

window.localStorage.setItem(key, data);

从LocalStorage 中删除项目：

window.localStorage.removeItem(key);

从LocalStorage 获取物品：

window.localStorage.getItem(key);

LocalStorage中只能存储一个字符串；如果你有一个对象，首先你必须将它转换为字符串，如下所示：

window.localStorage.setItem(key, JSON.stringify(obj));

当你想从LocalStorage 获取对象时：

const result=JSON.parse(window.localStorage.getItem(key));

以上所有提示与SessionStorage 相同。

您可以使用以下服务来处理SessionStorage 和LocalStorage。服务中的所有方法：

getSession(key: string): any
setSession(key: string, value: any): void
removeSession(key: string): void
removeAllSessions(): void
getLocal(key: string): any
setLocal(key: string, value: any): void
removeLocal(key: string): void 
removeAllLocals(): void

在您的组件、服务和...中注入此服务；不要忘记在核心模块中注册服务。

import { Injectable } from '@angular/core';

@Injectable()
export class BrowserStorageService {

  getSession(key: string): any {
    const data = window.sessionStorage.getItem(key);
    if (data) {
      return JSON.parse(data);
    } else {
      return null;
    }
  }

  setSession(key: string, value: any): void {
    const data = value === undefined ? '' : JSON.stringify(value);
    window.sessionStorage.setItem(key, data);
  }

  removeSession(key: string): void {
    window.sessionStorage.removeItem(key);
  }

  removeAllSessions(): void {
    for (const key in window.sessionStorage) {
      if (window.sessionStorage.hasOwnProperty(key)) {
        this.removeSession(key);
      }
    }
  }

  getLocal(key: string): any {
    const data = window.localStorage.getItem(key);
    if (data) {
      return JSON.parse(data);
    } else {
      return null;
    }
  }

  setLocal(key: string, value: any): void {
    const data = value === undefined ? '' : JSON.stringify(value);
    window.localStorage.setItem(key, data);
  }

  removeLocal(key: string): void {
    window.localStorage.removeItem(key);
  }

  removeAllLocals(): void {
    for (const key in window.localStorage) {
      if (window.localStorage.hasOwnProperty(key)) {
        this.removeLocal(key);
      }
    }
  }
}

【讨论】：