Как я могу получить доступ к ключу определенного элемента в локальном хранилище? - PullRequest
Новая
       26

Как я могу получить доступ к ключу определенного элемента в локальном хранилище?

0 голосов
/ 03 августа 2020

У меня есть массив таких объектов, и когда я нажимаю кнопку «Удалить из избранного», я хочу удалить определенный элемент из локального хранилища. Я удаляю со страницы с помощью функции removeLocal (), но она удаляет только со страницы, а не из локального хранилища. Я хочу удалить оба. Я генерирую случайное число при назначении ключа локального хранилища. Есть ли способ получить доступ к этому ключу и удалить элемент?

enter image description here enter image description here

html:

 Имя пользователя: {{user.login}}  Местоположение: {{user.location}}  Электронная почта: {{user.email}}  Ссылка на блог: {{user.blog}}  Член с: {{user.created_at}}  Просмотреть профиль 
 Добавить в избранное   Имя пользователя: {{item.login}}  Местоположение: {{item.location}}  ID: {{item.id}}  Удалить избранное    Журнал консоли

ts: 

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  user: any;
  profile: any;
  display: any;
  local: any;
  randomNumber: any;
  randomString: any;
  idString: any;
  keys: any;
  closeDiv: boolean = true;
  constructor(private userData: HttpService) {}

  ngOnInit() {
    this.display = Object.values(localStorage).map((val: any) => JSON.parse(val));
    console.log('ngOnInit Works', this.display);
  }

  findProfile() {
    this.userData.updateProfile(this.profile);
    this.userData.getUser().subscribe((result) => {
      this.user = result;
    });
  }

  localStorage(id: any) {
    this.randomNumber = Math.floor(Math.random() * 10000);
    this.randomString = this.randomNumber.toString();
    localStorage.setItem(this.randomString, JSON.stringify(this.user));
    this.display = Object.values(localStorage).map((val: any) => JSON.parse(val));
    console.log(this.display);
  }

  removeLocal(id: any) {
    for (let i = 0; i < this.display.length; i++) {
      if (this.display[i].id === id) {
        this.display.splice(i, 1);
      }
    }
  }

  detectChange(ev: any) {
    ev.length > 0 ? (this.closeDiv = false) : (this.closeDiv = true);
  }

}

1 Ответ

0 голосов
/ 03 августа 2020

Добавьте вызов localStorage.removeItem(key) к вашей функции removeLocal. Конечно, вам нужно где-то хранить свои случайные ключи, иначе вам придется интегрировать это решение для их анализа. 

  removeLocal(id: any, key: string) {
    for (let i = 0; i < this.display.length; i++) {
      if (this.display[i].id === id) {
        this.display.splice(i, 1);
        localStorage.removeItem(key); // here
      }
    }
  }

EDIT: После разговора в комментариях это решение можно упростить, удалив переменную из заголовка функции, сохранив переменную storageKey в отображении. 

  removeLocal(id: any) {
    for (let i = 0; i < this.display.length; i++) {
      if (this.display[i].id === id) {
        localStorage.removeItem(this.display[i].storageKey);
        this.display.splice(i, 1);
      }
    }
  }
...