如何从 LocalStorage 中检索值 [英] How to retrieve the value from LocalStorage

问题描述

我正在尝试测试 html5 localStorage 功能.出于某种原因，每当我尝试在刷新页面后从存储中检索值时，我都没有得到任何值.值正在本地存储在我的点击功能上.但是当我刷新页面时，它没有显示值.

I'm trying to test out html5 localStorage feature. For some reason, whenever I try to retrieve a value from storage after refreshing the page, i dont get any value. Values are getting stored locally on my click functionality. But when i refresh the page, it doesnt show the values.

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");
  >}  

>}  
>}

推荐答案

如果您尝试在 localStorage，你需要把它转换成字符串格式，因为localStorage只支持存储字符串值.您可以使用 JSON.stringify() 为此目的.

If you are trying to store arrays or objects in localStorage, you will need to convert it into a string format, as localStorage only supports the storing of string values. You can use JSON.stringify() for that purpose.

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

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

同样，当您需要从 localStorage 检索项目时，您可以使用 JSON.parse() 将其转换回数组或对象.

Likewise, when you need to retrieve the item from localStorage, you can use JSON.parse() to convert it back into an array or object.

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

<小时>

在您的构造函数中，您填充数组的方式过于复杂.填充 myItems 数组后，您可以将其存储在 localStorage 中.

---

On your constructor, you are overcomplicating the way you populate your array. After populating the myItems array, you can store it in your localStorage.

在您的 addItem() 方法中，您可以简单地将新项目推送到 myItems 数组，并调用 localStorage.setItem()，这将覆盖之前的值存储在您的 Values 键上.

On your addItem() method, you can simply push the new items to your myItems array, and call localStorage.setItem(), which will overwrite the previous value stored on your Values key.

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));
}

这篇关于如何从 LocalStorage 中检索值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！