如何从 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 数组后，您可以将其存储在 localStorage 中。

在您的 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));
}