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

>}  
>}

推荐答案

如果要在 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检索项目时，可以使用

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屋！