Как получить значение из LocalStorage

Question

Я пытаюсь протестировать функцию html5 localStorage. По какой-то причине, всякий раз, когда я пытаюсь получить значение из хранилища после обновления страницы, я не получаю никакого значения. Значения хранятся локально на моей функциональности клика. Но когда я обновляю страницу, она не показывает значения.

Файл src / app.component.ts

>import { Component } from '@angular/core';

>export class MyItems {
  >value: string;
  >constructor(value:string){
    >this.value = value;
 > }
>}
>@Component({
  >selector: 'my-app',
  >templateUrl: './app.component.html',
  >styleUrls: [ './app.component.css' ]
>})
>export class AppComponent  {
  >title = "Working with Angular";
  >myItems: MyItems[] = new Array();
  >IsForUpdate: boolean = false;
  >newItem: any = {};
 > updatedItem;

  >constructor(){
    >this.myItems.push(    
      >new MyItems("First Value"),    
      >new MyItems("Second Value"),    
      >new MyItems("Third Value"),    
      >new MyItems("Forth Value"),    
      >new MyItems("Fifth Value")    
    >);
    >localStorage.setItem("Values", JSON.stringify(MyItems));
    >var getValues = localStorage.getItem("Values");

  >}

 >AddItem() {    
   >this.myItems.push(    
    > this.newItem    
   >);    
   >this.newItem = {};
   >localStorage.setItem('dataSource', this.newItem);
   >localStorage.getItem('dataSource');    
  // console.log(localStorage.getItem('dataSource'));
> }  


 >EditItems(i){
   >this.newItem.value = this.myItems[i].value;
   >this.updatedItem = i;
   >this.IsForUpdate = true;
 >}



> UpdateItem(){
   >let data = this.updatedItem;
   >for(let i=0; i < this.myItems.length; i++){
    > if(i == data){
      >this.myItems[i].value = this.newItem.value;
     >}
  > }
    >this.IsForUpdate = false;
   > this.newItem = {};
 >}


 >DeleteItem(i) {
  >var confirmMe = confirm('Do you want to Delete it ?');
  >if(confirmMe == true){
      >this.myItems.splice(i, 1); 
  >} else {
   > alert("You cancelled the Operation");
  >}  

>}  
>}

Answer 1

Если вы пытаетесь сохранить массивы или объекты в localStorage , вам нужно будет преобразовать его в строковый формат, поскольку localStorage поддерживает только хранение строковых значений. Для этой цели вы можете использовать JSON.stringify () .

localStorage.setItem('Values', JSON.stringify(this.newItem));

localStorage.setItem('dataSource', JSON.stringify(this.items));

Аналогично, когда вам нужно извлечь элемент из localStorage, вы можете использовать JSON.parse () , чтобы преобразовать его обратно в массив или объект.

const storedItems = JSON.parse(localStorage.getItem('dataSource'));

---

В вашем конструкторе вы слишком усложняете способ заполнения массива. После заполнения массива myItems вы можете сохранить его в своем локальном хранилище.

В вашем методе addItem() вы можете просто вставить новые элементы в ваш массив myItems и вызвать localStorage.setItem(), который перезапишет предыдущее значение, сохраненное на вашем ключе Values.

myItems: string[] = [];

constructor(){
  console.log(JSON.parse(localStorage.getItem('Values')));

  this.myItems.push('First Value', 'First Value', 'Third Value', 'Forth Value', 'Fifth Value');
  localStorage.setItem('Values', JSON.stringify(this.myItems));
}

addItem() {
  const newItem = ''; //replace that with any value you desire
  this.myItems.push(newItem)
  localStorage.setItem('Values', JSON.stringify(this.myItems));
}