Angular 2 LocalStorage密钥

Question

我和LocalStorage一起工作。在构造函数中，我已经这样做了：

this.currentData = (localStorage.getItem('currentData')!==null) ? JSON.parse(localStorage.getItem('currentData')) : [ ];

但是这样做，我会将数据存储在数组中，我认为这并不好。

所以，我做到了：

constructor(){
if(this.currentData !== null  && this.currentData !== undefined) {
    for (var i = this.currentData.length - 1; i >= 0; i--) {
        this.currentData = JSON.parse(localStorage.getItem('currentData-' + i));
        console.log('currentData if:' + this.currentData)
    }
} else {
    console.log('currentData else:' + this.currentData)
}
}

但我弄错了，TypeError: Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined。

为了保存数据，我这样做：

saveLocalStorage(todo){
    this.objects.push(todo);
    for (var i = this.objects.length - 1; i >= 0; i--) {
        localStorage.setItem('currentData-' + i, JSON.stringify(this.objects[i]));
    }
}

如何从localStorage获取多次数据？有人知道我是怎么解决这个问题的吗？

Answer 1

您应该使用注入构造函数的localstorage

您可能忘记了this关键字，如下所示

this.currentData = (this.localStorage.getItem('currentData')!==null) ? JSON.parse(localStorage.getItem('currentData')) : [  ];

或者，您可以使用as，

user:any[]={name:'abc',id:1};
  valuFromLocalStorage:any{};
  constructor(private localStorageService: LocalStorageService) {
    this.name = 'Angular2';
    this.localStorageService.add('a',this.user);
    console.log(this.localStorageService.get('a')); 
    this.valuFromLocalStorage= this.localStorageService.get('a')
  }

Answer 2

我做了一个服务来处理localStorage。也许这对你有帮助：

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

@Injectable()
export class NpStorageService {

  constructor(){
    this.checkIflocalStorageIsAvailable();
  }

  private checkIflocalStorageIsAvailable = () => {
    let type = '';
    try {
      let testKey = '__np_storage_test__' + Date.now();
      type = 'localStorage';
      localStorage.setItem(testKey, 'work');
      localStorage.removeItem(testKey);
      type = 'sessionStorage';
      sessionStorage.setItem(testKey, 'work');
      sessionStorage.removeItem(testKey);
      return true;
    }
    catch(e) {
      console.error('NpStorageService => Cannot find ' + type + ' on this browser.');
      return false;
    }
  }

  get = (key?: string) => {
    return JSON.parse(localStorage.getItem(key));
  }

  set = (key: string, value: any): boolean => {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    }
    catch(e) {
      return false;
    }
  }

  remove = (key: string) => {
    return localStorage.removeItem(key);
  }

}

Answer 3

用于$localStorage服务

https://github.com/gsklee/ngStorage

它允许您轻松地与localStorage对象交互，并在数据更改时调用摘要。

您可以轻松地添加/删除变量，如下所示

$localStorage.myObject = {array: [1,2,3,4]};